Question

我有一个jquery点击处理程序，用于切换列表元素之一：

$(document).on('click', 'ul li', function() {
    $(this).toggleClass('expanded');
});

有了它，我可以更改我点击展开和折叠它的元素。

但是，当我点击另一个元素时，我只希望展开一个元素并将之前展开的元素关闭，该怎么办？

我想这样做，将$(this)（点击li）和li.expanded传递给toggleClass('expanded')的jQuery选择器。

类似的东西（但这不起作用）：

$(document).on('click', 'ul li', function() {
    $(this, 'ul li.expanded').toggleClass('expanded');
});

提前致谢！

UPD： 我需要这个函数才能工作，即使之前没有扩展元素（在页面开始时），并且当我点击它时能够折叠先前展开的元素。

如果使用无法正常工作（不扩展第一项）：

$('li.expanded', this).toggleClass('expanded');

但可以正常使用：

$('li.expanded').toggleClass('expanded');
$(this).toggleClass('expanded');

Answer 1

刚刚更改了传递给选择器的参数的位置。 jquery选择器接受第二个参数context。您可以在哪里传递当前上下文this：

$('ul li.expanded',this).toggleClass('expanded');

这相当于：

$(this).find('ul li.expanded').toggleClass('expanded');

完整代码段

$(document).on('click', 'ul li', function() {
  $('ul li.expanded').not($(this).find('ul li.expanded')).removeClass('expanded'); 
  $('ul li.expanded',this).toggleClass('expanded');
});

Answer 2

ToggleClass在您的上下文中不起作用。它崩溃所有li使用addClass和removeClass而不是

$(document).on('click', 'ul li', function() {
    $('ul li.expanded').removeClass('expanded'); // remove class expanded
    $(this).addClass('expanded'); // add class current li
});

Answer 3

您可以删除课程＆＃39;展开＆＃39;从所有\033IText after another escaped I.元素中添加并添加到单击的元素：

此代码

li

在这种情况下不起作用

工作演示

＆＃13;

$('ul li.expanded',this).toggleClass('expanded');

＆＃13;

$(document).on('click', 'ul li', function() {
  $('ul li').removeClass('expanded');
  $(this).addClass('expanded');
});

＆＃13;

li.expanded { color:red }

＆＃13;

Answer 4

你需要交换！

$('ul li.expanded', this).toggleClass('expanded');

这是你的代码。上下文this应该是下一个！

$(document).on('click', 'ul li', function() {
    $('ul li.expanded', this).toggleClass('expanded');
});

Answer 5

我认为你需要

$(document).on('click', 'ul li', function() {
    $(this).addClass('expanded'); //Add class to current li
    $('ul li.expanded').not(this).toggleClass('expanded'); //Toggle class from other li's
});

如何将$（this）传递给选择器

5 个答案: