单击链接后保持子菜单打开

Question

单击链接后，如何使相应的子菜单保持可见？

我应该说我在Wordpress中使用自定义菜单 - 在Wordpress中，我为所有主要菜单项添加了“first”类，为子菜单中的所有链接添加了“second”类。

.second的CSS是：

.second {
   display: none;
}

这是JQuery：

$('.first > a').click(function(event) {
   event.preventDefault();
});

$('.first').click(function() { 
   $(this).find('.second').show();
}); 

Answer 1

假设标记类似于以下代码。如果项目有子菜单，则单击显示/隐藏子菜单，否则直接打开链接。

// hide all the sub menus
$('#nav > li > ul').hide();

// show/hide sub menu if it exists
$('#nav > li > a').click(function () {
    var $ul = $(this).siblings('ul');
    if ($ul.length > 0) {
        $ul.toggle();
        return false;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul id="nav">
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">About</a>
        <ul>
            <li><a href="#">Team</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </li>
</ul>