jquery - 如何将 $(this) 传递给选择器

Question

我有一个 jquery 点击处理程序，它可以切换列表元素之一:

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

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

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

我想将 $(this) (单击 li)和 li.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');
});