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/