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

时间:2015-10-29 18:20:10

标签: javascript jquery css menu accordion

我有一个手风琴菜单,可以从数据库中快速生成,如下所示

    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>';

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>

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

1 个答案:

答案 0 :(得分:0)

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

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

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

   }

注意:这只是一个例子。研究并将它与你的情况相提并论。