Question

点击打开子菜单，下次点击关闭 - 这就是我想要实现的目标。示例是this page（＆＃39;关注＆＃39;链接下的子菜单）它打开子菜单（添加类＆＃39;打开＆＃39;），但不关闭。卡住...... :(

我的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-attribute分配给变量：

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

Demo 3

<强>参考

.toggleClass()

.slideToggle()

Answer 2

改为使用toggleClass。

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

Answer 3

您正在寻找的是.toggleClass()功能：

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

查看the corrected jsfiddle：）

你做错了是，你链接了添加和删除功能：

$(this).removeClass('open').addClass('open');

这将取消课程＆＃39; open＆＃39;并且（当这是finsihed时）添加课程＆＃39; open＆＃39;再次。这导致了班级不会消失。

Answer 4

在jquery中使用toggleClass()函数

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

Demo Here

Answer 5

它是因为你要删除该类然后添加它...所以它总是会被添加

$(this).removeClass('open');

关闭它。

改为使用

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

Answer 6

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

使用toggleClass（）函数。

Demo

Answer 7

请执行以下操作：

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

jsfiddle

JQuery添加/删除类onClick

7 个答案: