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

Question

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

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

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

但是,当我点击另一个元素时,如果我只想扩展一个元素并将先前扩展的元素关闭,该怎么办？

我想这样做通过$(this)(点击li)和li.expandedjQuery选择器toggleClass('expanded').

像(但这不起作用):

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