簡體   English   中英

jQuery手風琴菜單:在另一個頁面中保持所選菜單展開

[英]Jquery Accordion menu: keep selected menu expanded in another page

我有一個從數據庫即時生成的手風琴菜單,如下所示

    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代碼突出顯示了子菜單,但頂層菜單或父菜單未展開以顯示突出顯示的子菜單。 請告知如何完成此操作。 提前致謝。

您可以嘗試以下類似的簡單操作:

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

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

   }

注意:這僅是示例。 研究並將其視情況而定。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM