Jak przekazać $ (this) do wyboru

Question

Mam kliknij obsługi jquery który przełącza jeden z elementów listy:

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

z nim mogę zmienić elementu Kliknąłem rozwijania i zwijania go.

Ale co zrobić, jeśli chcę, aby tylko jeden element został rozszerzony, a poprzednio rozwinięty element został zamknięty, gdy kliknę na inny?

chcę zrobić ten przechodzącego zarówno $(this) (kliknięciu li) i li.expanded jQuery selektor dla toggleClass('expanded').

Coś podobnego (ale to nie działa):

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

Z góry dzięki!

UPD: muszę tę funkcję do pracy, nawet jeśli nie został rozszerzony elementy wcześniej (na początku strony) i być w stanie zwinąć wcześniej rozszerzoną elementu po kliknięciu na nim.

to nie działa prawidłowo, jeśli zastosowanie (nie rozszerza pierwszą pozycję):

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

ale działa dobrze z:

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

Answer 1

właśnie zmienił pozycję argumentów przekazanych do selektora. Selektor jquery akceptuje drugi parametr context. gdzie można przekazać bieżący kontekst this:

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

co byłoby równoznaczne z:

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

Pełna urywek:

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

Trzeba zamienić!

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

To jest twój kod. Kontekstowy this powinien przyjść dalej!

Answer 3

myślę, że trzeba

$(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 nie działa w kontekście.jej zwinąć wszystkie Li Wykorzystanie addClass i removeClass zamiast

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

Answer 5

można usunąć klasę „rozszerzony” ze wszystkich li elementów i dodać go do klikniętego jeden:

ten kod

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

robi nie działa w tym przypadku

DEMO PRACY

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