1

クリックすると展開されるドロップダウンメニューがあります。メニューはデフォルトで折りたたまれています。サブメニュー ページの 1 つがアクティブな場合、メニューが展開されているように見えるようにしたいと思います。それが明確であることを願っています。これが私のコードです。

HTML

<li class="dropdown">
            <a class="disablelink" href="#">Carbohydrates, proteins &amp; fats</a>
            <ul class="sub_navigation">
                <li><a href="carbohydrates.php">Carbohydrates</a></li>
                <li><a href="proteins.php">Proteins</a></li>
                <li><a href="fats.php">Fats</a></li>
            </ul>
        </li>

jQuery

$(document).ready(function() {
        $('.dropdown').click(function() {
                        // When the event is triggered, grab the current element 'this' and
                        // find it's children '.sub_navigation' and display/hide them
            $(this).find('.sub_navigation').slideToggle(); 
        });

        $(".disablelink").click(function(e) {
            e.preventDefault();
        });

    });

したがって、ユーザーがオンの場合carbohydrates.php、proteins.phpまたは fats.phpメニューを展開したいと思います。私はこれを行う方法がわかりません。誰でも助けることができますか？

4

1 に答える 1

3

ページがアクティブな場合、そのリンクに追加のクラスを与える必要があります。

<li class="current_page"><a href="carbohydrates.php">Carbohydrates</a></li>.

次に、jQuery を使用してメニューをループし、メニュー項目にクラスがある場合はそれを展開できます。

$('.dropdown li').each(function() {
    if ($(this).hasClass('current_page')) {
           $(this).closest('.sub_navigation').slideDown();          
    }            
});

デモ: http://jsfiddle.net/R7gkw/

于 2012-07-30T13:34:10.507 に答える