JQuery testen, ob ein element sichtbar ist oder verborgen, und dann hinzufügen / entfernen von Klassen

Ich habe ein div, das fängt beim laden der Seite versteckt. Wenn ich schalten Sie die " + " - element, das relative-div-schaltet, um zu sehen. Ich bin versucht, fügen Sie eine Klasse basierend auf der is(":hidden") oder nicht mit einer if - else-Anweisung.

Mein HTML ist:

<div class="views-row">
<div class="field-group-format-toggler-abstract">+</div>
<h2>Title 1</h2>
<div class="field-group-format-wrapper" style="display:none;">
Dolor minim neque pala ratis sit. Ideo odio praesent. Aliquam capto gravis quis. Antehabeo diam huic praemitto. Immitto pneum ratis vereor volutpat. Brevitas facilisis illum macto mos plaga ratis utrum. Jumentum rusticus secundum
</div>
</div>

und meine JQuery ist:

$(".field-group-format-toggler-abstract").click(function() {
$(this).nextAll(".field-group-format-wrapper").toggle();
               });

if($(".field-group-format-wrapper").is(":hidden"))
//this seems to work, 'closed' gets added
$('.field-group-format-toggler-abstract').addClass("closed");

//but this part does not seem to work     
     else
$('.field-group-format-toggler-abstract').addClass("open").removeClass("closed");

Diesem ersten Teil funktioniert es, aber das hinzufügen und entfernen der Klasse nicht. Ich habe versucht variuos Möglichkeiten, dies zu tun, aber nichts scheint zu funktionieren, die Klasse bleibt nur auf closed.

Hier ist ein Fiddle

  • Wie kommen Sie ausgewählt siblings() Antwort auf Ihre frühere Frage, aber deine Umsetzung hier zeigt es meine Antwort, die verwendet nextAll() ? stackoverflow.com/questions/11832405/...
  • bitte Geduld mit mir, ich bin immer noch Experimentieren mit verschiedenen Implementierungen der code und was am besten funktioniert. Vielen Dank 🙂
InformationsquelleAutor Danny Englander | 2012-08-06
  1. 2

    Versuchen, diese, 

    $(".field-group-format-toggler-abstract").click(function() {
    var $div = $(this).nextAll(".field-group-format-wrapper");  //<-- cache the selector
    $div.toggle();       
    $(this).toggleClass('open', $div.is(':visible')); //<-- if wrapper div is visible class open will be added //else it will be removed
    $(this).toggleClass('closed', $div.is(':hidden')); //<-- if wrapper div is hidden class open will be added //else it will be removed
});​

    Sind Sie in der Lage zu gehen in einem Zustand/Schalter als eine zweite argument in .toggleClass()

    http://jsfiddle.net/LHguJ/25/

    • haha, ich habe gerade zu diesem Schluss gekommen, mich nach dem spielen, um mit dieser für ein paar Stunden. Sehr schön! Danke.
    InformationsquelleAutor ᾠῗᵲᄐᶌ
  2. 1

    versuchen, diese,

    if($(".field-group-format-wrapper").is(":visible")){
  $('.field-group-format-toggler-abstract').addClass("close").removeClass("open");
}
else {
    $('.field-group-format-toggler-abstract').addClass("open").removeClass("closed");
}
    InformationsquelleAutor Shreedhar
Schreibe einen Kommentar