如果其中一个子菜单项处于活动状态，则展开下拉菜单

Expand dropdown menu if one of the sub-menu items is active

本文关键字：活动状态 下拉菜单 菜单项 一个 如果      更新时间：2024-05-19

我有一个下拉菜单，可以通过单击展开。默认情况下，菜单是折叠的。如果其中一个子菜单页面处于活动状态，我希望菜单显示为展开状态。我希望这是清楚的。这是我的密码。

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上，我希望展开菜单。不过我不知道该怎么做。有人能帮忙吗？

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

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

相关文章：