单击折叠菜单内的链接时，如何在页面刷新新的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

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

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

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();