0

ナビゲーション メニュー -- 別のリンクをクリックしてページを更新したときに、メニューを開いたままにしておく必要があります

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>

スクリプトの終わり

今すぐアコーディオンを表示する Web サイト: http://www.ootpik.info/lauren/ootpik5/receipt-printer.html

4

1 に答える 1

1

現在の URL に基づいて別のメニュー セレクターを試すことをお勧めします (ページが更新されると、以前にクリックされたメニュー項目を取得できないため)。次のようになります (recipe-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();
于 2013-06-25T20:47:11.283 に答える