JQuery 添加/删除类 onClick

Question

单击时打开子菜单，下次单击时关闭 - 这就是我想要实现的目标。例如 this page (“关注”链接下的子菜单)。
它打开子菜单(添加“打开”类)，但不关闭。卡住了...:(

我的html:

<ul id="toggle"><li>
<a href="#">Menu</a>
<ul id="dropdown" class="dropdown-menu" role="menu">
<li><a href="#">2017</a></li>
<li><a href="#">2012</a></li>
<li><a href="#">2003</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>    

JavaScript:

$(document).ready(function(){
$('#toggle li').on('click', function(){
$(this).removeClass('open').addClass('open');
});
});

http://jsfiddle.net/Gallex/32pv6xz8/7/

Answer 1

您可以使用函数toggleClass()来实现此目的:

$('#toggle li').on('click', function () {
    $(this).toggleClass('open')
});

Demo

这是一种略有不同的方法:

jQuery

$('#toggle li').on('click', function () {
     $(this).find('ul').slideToggle();
 });

CSS

#toggle li ul {
    list-style-type: none;
    left:0;
    position:absolute;
    display: none;
}

Demo 2

为了防止重定向，您必须使用.preventDefault():

 $('#toggle li:has(#dropdown)').on('click', function (event) {
    if ($(event.target).parents('#dropdown').length > 0) {
        event.stopPropagation();
    } else {
        event.preventDefault();
    }
    $(this).find('ul').slideToggle();
});

我不确定这是否是最干净或最好的方法，但它确实有效。

如果您想保存网址以供进一步使用(例如通过 window.location 重定向)，您可以将 href 属性分配给变量:

var href = $(this).find('a').attr('href');

Demo 3

引用

.toggleClass()

.slideToggle()