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

我建议您根据当前的网址尝试另一个菜单选择器（因为当您的页面刷新时，您无法获得之前点击的菜单项）。它可能是这样的（对于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

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

所以算法的完整例子可能是：

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

单击手风琴菜单中的链接时，如果使用新的html内容刷新页面，如何保持手风琴菜单打开？

1 个答案: