2017-01-31 3 views
2

Ich versuche mein Bestes, um dies zu formulieren, dies existiert wahrscheinlich bereits, aber ich bin mir nicht sicher, die Sprache, um es zu finden.wie man toggleClass nur auf das angeklickte Element anwendet

Ich habe ein Akkordeon, das von einer Liste ausgegeben wird. Ich versuche es so zu machen, wenn das Listenelement angeklickt wird, das Symbol wird animiert.

$('[data-toggle=collapse]').on('click', function() { 
     $('[data-toggle=collapse]').not(this).removeClass('collapsed'); 
     $('.plus-minus-toggle').toggleClass('collapsed'); 
    }); 

ich versuchte, aus dem googeln ich getan hatte, um dies zu erreichen, aber was passiert, wenn ich mit [data-toggle=collapse] dann all divs mit .plus-minus-toggle Toggle collapsed auf einem beliebigen Listeneintrag klicken. Ich möchte nur die [data-toggle=collapse] Ich klickte auf um collapsed umschalten. Ich bin mir nicht sicher, wie ich das für einmal herausstellen soll.

aktualisieren

ich ein ähnliches Stück Code haben, die in engem Zusammenhang steht, ist es möglich, sie in meinem OP zu binden? Oder sollten sie getrennt bleiben?

$(document).on('click', '[data-toggle=collapse] .fa', function(e) { 
     e.stopPropagation(); 
    }); 

Update # 2

<div class="tab-pane active" id="tab2"> 
    <div class="panel-group" id="help-accordion-2"> 
    <div class="panel panel-default panel-help"> 
     <a href="#post-surgery-add-case-add-cases-work" data-toggle="collapse"> 
     <div class="panel-heading"> 
      <h2>What is an add-on case? How to add-on cases work?</h2> 
      <div class="plus-minus-toggle collapsed"></div> 
     </div> 
     </a> 

     <div id="post-surgery-add-case-add-cases-work" class="collapse"> 
     <div class="panel-body"> 
      <p>Lorem Ipsum</p> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Hier ist eine Probe des HTML verwendet wird.

Update # 3

$('[data-toggle=collapse]').on('click', function() { 
    $('[data-toggle=collapse]').not(this).removeClass('collapsed'); 
    $(this).find('.plus-minus-toggle').toggleClass('collapsed'); 
}); 

Dieser Code erreicht, was ich wollte.

Antwort

1

So:

$('[data-toggle=collapse]').on('click', function() { 
    $('[data-toggle=collapse]').not(this).removeClass('collapsed'); 
    $(this).toggleClass('collapsed'); 
}); 

Hoffnung, das hilft.

+0

wie funktioniert 'this' wissen, dass es die div ist, die' collapsed' hat? '[data-toggle = collapse]' hat diese Klasse nicht zum Umschalten. Vielleicht braucht die zweite Zeile stattdessen '.plus-minus-toggle'? –

+0

Haben Sie den HTML-Code, den Sie verwenden? 'this' schaltet das angeklickte Objekt mit data-toggle = collapse um. Ist das Element "plus-minus-toggle" ein untergeordnetes Element des angeklickten Elements? – carlosp120

+0

Ich habe mein OP –

0
$('[data-toggle=collapse]').on('click', function(e) { 
     $('[data-toggle=collapse]').not(this).removeClass('collapsed'); 
     $('.plus-minus-toggle').toggleClass('collapsed'); 
     e.stopPropogation(); 
}); 
Verwandte Themen