Toggle-Klasse auf direkte Kinder

Ich habe mehrere Divs mit der gleichen Klasse. Ich möchte in der Lage sein, die Klasse auf den Kindern von jedem unabhängig auf einer Klick-Funktion umzuschalten.Toggle-Klasse auf direkte Kinder

Was ich zu diesem Skript hinzufügen, so dass es nur auf den unmittelbaren Kindern von jedem ausgeführt wird.

Vielen Dank für alle Anregungen

HTML

<div class="subLinkPage"> 
    <ul aria-labelledby="headLnk_02" class="nav__items"> 
     <li class="sub_p01 togSubList"> 

      <a role="button" href="#" class="sub-expand_collapse" aria-label="toggle menu"> 
       <i class="fa fa-plus" aria-hidden="true"></i> 
      </a> 

      <a id="subLnk_01" class="parent_link menu_p01" href="../content/m04/m04_c02_p01.html">Facebook feed</a>    
      <ul class="sub_items sub_items_01"> 
       <li><a href="../content/m04/m04_c02_p01-a.html" class="menu_p01a">Adding a Facebook feed<br/>to the home page</a></li> 
      </ul> 
     </li> 
     <li class="sub_p02 togSubList"> 


      <a role="button" href="#" class="sub-expand_collapse" aria-label="toggle menu"> 
       <i class="fa fa-plus" aria-hidden="true"></i> 
      </a> 

      <a id="subLnk_02" class="parent_link menu_p02" href="../content/m04/m04_c02_p02.html">Twitter feed</a>    
      <ul class="sub_items sub_items_02"> 
       <li><a href="../content/m04/m04_c02_p02-a.html" class="menu_p02a">Adding a Twitter<br/>feed web part</a></li> 
      </ul> 
     </li>  
    </ul> 
</div>

Quelle

2017-02-16 Laurence L

einige HTML-Struktur Bitte gebe, und es ist nicht so klar auf, welches Element Sie möchte den „Klick“ -Ereignis überprüfen. – Dekel

Es gibt keine '.fa' Elemente, die nicht unmittelbar untergeordnete Elemente von' .sub-expand_collapse' sind. Welche Elemente schaltet es, die es nicht sollte? – Barmar

Das Hinzufügen von HTML ist nicht genug. Auf welches Element klicken Sie und welche Elemente sollten beim Anklicken und welche Elemente * nicht * umgeschaltet werden? – Barmar

können Sie die sofortige Kind selector jQuery (parent > child)

$("div.subLinkPage").on('click', function() { 
    $(this).find(".sub-expand_collapse > .fa").toggleClass('fa-minus fa-plus'); 
});

Quelle

2017-02-16 00:59:17 MaxZoom

Sie helfen mir wirklich, dies zu denken –

Sie brauchen '.filter' nicht, verwenden Sie einfach den Selektor' $ ("divLinkPage") ' – Barmar

Wenn es in einem .click Fall ist, können Sie Dinge wie $("MyElement > MyElementsChild").remove();
tun $(this) statt $(".sub-expand_collapse")

Quelle

2017-02-16 00:50:47 jake2389

Tut mir leid, das funktioniert nicht für mich –

Zeigen Sie den Code für das Click-Ereignis – jake2389

verwenden, um die ">" Zustände dass es ein Kindelement ist.

Quelle

2017-02-16 00:52:16

Dies betrifft immer noch alle untergeordneten .sub-expand_collapse angewendet wird –

@LaurenceL Der '>' CSS-Operator entspricht nur unmittelbare Kinder, nicht alle Kinder. Das sollte funktionieren. Bitte aktualisieren Sie Ihre Frage mit dem HTML und erläutern Sie klar, auf welche Elemente Sie Einfluss nehmen möchten. – Barmar

Kein Problem wird das jetzt tun –

Toggle-Klasse auf direkte Kinder

Antwort

Verwandte Themen