Wie $ (this) zu übergeben Wähler

Question

ich einen jquery Click-Handler haben, die eine der Listenelemente umgeschaltet wird:

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

Damit ich Element klickte ich ändern kann, erweitert und es zusammenbricht.

Aber was, wenn ich möchte nur ein Element erweitert werden und zuvor erweitert Element zu schließen, wenn ich auf ein anderes klicke?

Ich möchte für toggleClass('expanded') dieses vorbei beide $(this) (geklickt li) und li.expanded zu jQuery-Selektor tun.

So etwas (aber nicht funktioniert):

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

Vielen Dank im Voraus!

UPD: ich diese Funktion muß auch arbeiten, wenn keine Elemente vor (auf Seite Start) erweitert wurden und in der Lage zu sein, die zuvor expandierte Element kollabieren, wenn ich darauf klicken.

es funktioniert nicht richtig, wenn die Verwendung (nicht erste Element nicht erweitern):

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

aber funktioniert gut mit:

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

Answer 1

verändert einfach die Position der Argumente Selektor übergeben. Der jQuery-Selektor akzeptiert den zweiten Parameter context. wo Sie den aktuellen Kontext this passieren kann:

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

Voll Snippet:

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

, die wäre gleichbedeutend

tauschen

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

Sie müssen!

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

Dies ist Ihr Code. Der kontextuelle this sollte als nächstes kommen!

Answer 3

Ich glaube, Sie brauchen

$(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 nicht in Ihrem Kontext arbeiten.deren Zusammenbruch aller Gebrauch addClass und removeClass Li statt

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

Answer 5

Sie Klasse entfernen können aus allen li Elemente ‚erweitert‘ und fügen Sie es dem angeklickt ein:

Dieser Code

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

tut funktioniert nicht in diesem Fall

ARBEITEN DEMO

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