当点击手风琴菜单内的链接时，一旦页面用新的html内容刷新，我如何保持手风琴菜单打开

Question

导航菜单-当点击另一个链接刷新页面时，菜单需要保持打开状态

ul class="menu">
                    <li class="item1"><a href="#">Hardware</a>
                        <ul>
                            <li class="subitem1"><a href="receipt-printer.html">Receipt Printer</a></li>
                            <li class="subitem2"><a href="barcode-scanner.html">Barcode <span class="item-move2">Scanner</span> </a></li>
                            <li class="subitem3"><a href="card-swipes.html">Card Swipes</a></li>
                            <li class="subitem4"><a href="weighscales.html">Weighscales</a></li>
                            <li class="subitem5"><a href="touchscreens.html">Touchscreens</a></li>
                            <li class="subitem6"><a href="label-printer.html">Label Printer</a></li>
                            <li class="subitem7"><a href="customer-display.html">Customer <span class="item-move2"> Display</span></a></li>
                            <li class="subitem8"><a href="wap.html">WAP</a></li>
                        </ul>
                    </li>
                    <li class="item2"><a href="#">Software</a>
                        <ul>
                           <li class="subitem1"><a href="step1/install-ootpik.html">Installing ootpik</a></li>
                            <li class="subitem2"><a href="step1/pref-security.html">Preferences &amp; <span class="item-move2">Security</span></a></li>
                        </ul>
                    </li>
                </ul>

菜单末尾操作手风琴菜单的脚本

<!--initiate accordion-->
<script type="text/javascript">
    $(function() {
        var menu_ul = $('.menu > li > ul'),
               menu_a  = $('.menu > li > a');
             menu_ul.hide();
        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>  

脚本结束

网站查看手风琴现在：http://www.ootpik.info/lauren/ootpik5/receipt-printer.html

Answer 1

我建议您尝试基于当前url的另一个菜单选择器（因为当您的页面刷新时，您无法获得以前单击过的菜单项）。它可能是这样的（对于receipt-printer.html页面）：

$('.menu > li > ul:not(:has(li > a[href="receipt-printer.html"]))')

这是硬编码的，但我认为它可能对你有用。您可以从window.location.pathname中获得当前页面的值。例如：

var url = window.location.pathname.split('/')[3] //because on your site you have relative url lauren/ootpik5/receipt-printer.html

但它也是硬编码的，我不确定它是否适用于您网站上的任何URL。

因此，完整的算法示例可能是：

var splittedUrl = window.location.pathname.split('/');
var href = splittedUrl[splittedUrl.length - 1];
var menu_ul = $('.menu > li > ul:not(:has(li > a[href="' + href + '"]))');
munu_ul.hide();