Jquery Accordion菜单:将选中的菜单扩展到另一页

时间:2022-12-01 14:44:25

I have an accordion menu getting generated on the fly from database as follows

我有一个手风琴菜单,从数据库中即时生成,如下所示

    echo '<div class=" top-nav rsidebar span_1_of_left">';
            echo '<h3 class="cate">CATEGORIES</h3>';
            $content = "<ul class=\"menu\">";
            $last_tab = NULL; // remember the last tab value (start with a value it will never be)
            $catId=0;
            $i=0;
            while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                if($last_tab != $row['tab']){
                    // the tab changed
                    if($last_tab != NULL){
                        // it was not the first tab, close the previous tab
                        $content .="\t</ul>\n";
                    }
                    $last_tab = $row['tab']; // remember the new tab value
                    // start a new tab
                    $content .="\t<li><a href=\"#\">{$row['tab']}</a>\n";
                    $content.="\t<ul class=\"cute\">\n";
                }
                $catId = catIdFromCatLabel($row['label']);
                // output each label
                $content.="\t\t<li><a href=\"products.php?cat_id=".$catId."\" id=\"sub_li_".$i."\">{$row['label']}</a></li>\n";
                $i=$i+1;
            }
            // close the last tab
            $content .= "\t</ul>\n</li>\n</ul>\n";
            echo $content;
echo '</div>';

The javascript is as follows:

javascript如下:

        <script type="text/javascript">
        $(function() {
            var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
            var menu_ul = $('.menu > li > ul'),
                menu_a  = $('.menu > li > a'),
                cute_a  = $('.cute > li > a ');
                menu_ul.hide();
            cute_a.each(function(){
                if($(this).attr('href') === pgurl){
                    $(this).addClass('active');
                }else{
                   // alert('else');
                }
            });
            menu_a.click(function(e) {
                e.preventDefault();
                if(!$(this).hasClass('active')) {
                    menu_a.removeClass('active');
                    menu_ul.filter(':visible').slideUp('normal');
                    $(this).addClass('active').next().stop(true,true).slideDown('normal');
                } else {
                    $(this).removeClass('active');
                    $(this).next().stop(true,true).slideUp('normal');
                }
            });
        });
    </script>

My requirement is to have the selected Submenu expanded and highlighted in page-2 which was clicked on page-1.Presently, my javascript code highlights the Submenu but the top level menu or parent menu is not expanded to reveal the highlighted submenu. Please advise how to accomplish this . Thanks in advance.

我的要求是在页面1中点击页面2中展开并突出显示所选子菜单。目前,我的javascript代码突出显示子菜单,但*菜单或父菜单未展开以显示突出显示的子菜单。请告知如何完成此任务。提前致谢。

1 个解决方案

#1


0  

You could just try something simple like below:

您可以尝试下面这样简单的事情:

 if (window.location.href.indexOf("#openPanel1") >= 0) {
       $("#openPanel").show();

   } else if (window.location.href.indexOf("#openPanel2") >= 0) {
       $("#openPanel2").show();

   }

Note: This is just an example. Study and apple it to your case.

注意:这只是一个例子。研究和苹果它你的情况。

#1


0  

You could just try something simple like below:

您可以尝试下面这样简单的事情:

 if (window.location.href.indexOf("#openPanel1") >= 0) {
       $("#openPanel").show();

   } else if (window.location.href.indexOf("#openPanel2") >= 0) {
       $("#openPanel2").show();

   }

Note: This is just an example. Study and apple it to your case.

注意:这只是一个例子。研究和苹果它你的情况。