JQuery 添加/删除类 onClick [英] JQuery add/remove class onClick

问题描述

点击打开子菜单，下次点击关闭 - 这就是我想要实现的.示例是此页面(关注"链接下的子菜单).
它打开子菜单(添加类打开")，但不会关闭.卡住了... :(

Open submenu on click, close on next click - that's what i would like to achive. example is this page (submenu under 'follow' link).
it opens submenu (adds class 'open'), but not closing. stucked... :(

我的 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:

javascript:

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

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

推荐答案

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

You can use the function toggleClass() for this:

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

演示

这里有一个稍微不同的方法:

Here is a slightly different approach:

jQuery

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

CSS

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

演示 2

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

For preventing the redirect you have to use .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();
});

我不确定这是最干净还是最好的方法，但它确实有效.

I`m not sure if this is the cleanest or best approach, but it is working.

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

If you want to save the url for further use (e.g. redirectuing via window.location) you can assign the href-attribute to a variable:

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

演示 3

参考

.toggleClass()

.slideToggle()

这篇关于JQuery 添加/删除类 onClick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！