Как передать $ (это) селектору

Question

У меня есть JQuery обработчик щелчка, который переключает один из элементов списка:

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

С этим я могу изменить элемент Я щелкнул сворачивая и разворачивая его.

Но что, если я хочу, чтобы только один элемент был расширен, а ранее расширенный элемент закрывался, когда я нажимаю на другой?

Я хочу сделать это проходящее как $(this) (нажал li) и li.expanded на JQuery селектор для 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'); 

Полный Snippet:

$(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

Вы должны поменять!

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

Это твой код. Контекстуальный this должен появиться дальше!

Answer 3

Я думаю, что вам нужно

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

Answer 4

ToggleClass не работает в вашем контексте.его крах всех Ли Использование addClass и removeClass вместо

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

Answer 5

Вы можете удалить класс «расширен» из всех li элементов и добавить его в щелкнул один:

Этот код

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

делает не работают в этом случае

РАБОЧИЙ ДЕМО

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

li.expanded { color:red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="expanded">test</li> 
 
    <li>test2</li> 
 
    <li>test3</li> 
 
    <li>test4</li> 
 
</ul>