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

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

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

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

但是，如果我只想扩展一个元素，并且在单击另一个元素时关闭以前扩展的元素，该怎么办

我想将

$（this）

（单击

li

）和

li.expanded

传递给jQuery选择器，用于

切换类（'expanded'）

类似于（但这不起作用）：

提前谢谢

UPD: 我需要这个函数工作，即使之前（在页面开始时）没有展开任何元素，并且当我单击它时能够折叠以前展开的元素

如果使用（不展开第一项），则它将无法正常工作：

但在以下情况下效果良好：

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

---

刚刚更改了传递给选择器的参数的位置。jquery选择器接受第二个参数

context

。您可以将当前上下文传递给此：

$('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');
});

你需要交换

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

这是你的密码。接下来应该是上下文

这个

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

我想你需要

$(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
});

切换在您的上下文中不工作的类。它的崩溃所有李使用addClass和removeClass代替

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

您可以从所有
li
元素中删除类“expanded”，并将其添加到单击的元素中：

此代码

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

在这种情况下不起作用

工作演示


$（文档）。在（'click'，'ul li'，function（）上{
$（'ul li'）.removeClass（'expanded'）；
$（this.addClass（'expanded'）；
});
li.expanded{color:red}


测试
测试2
测试3
测试4
那么用一个方法就不可能做到这一点吗？@s.webbandit-您在问题中只说了“但是如果我只想在单击另一个元素时扩展一个元素并关闭以前扩展的元素怎么办？”我想这只会切换已单击元素的已扩展类，但它不会从上一个.expanded元素中删除此类
$(document).on('click', 'ul li', function() {
    $('ul li.expanded').removeClass('expanded'); // remove class expanded
    $(this).addClass('expanded'); // add class current li
});

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