javascript - 如果子菜单项之一处于活动状态，则展开下拉菜单

Question

我有一个通过单击展开的下拉菜单。默认情况下，菜单是折叠的。如果子菜单页面之一处于活动状态，我希望菜单看起来被扩展。我希望这很清楚。这是我的代码。

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我希望扩展菜单。我不知道该怎么做。任何人都可以帮忙吗？

Answer 1

例如，当页面处于活动状态时，您需要为其链接提供额外的类；

<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/