toggle Klasse und Sichtbarkeit, Anzeige

Question

Wenn ich auch den Anzeigeblock umschalten möchte: keine.

Wie kann ich das tun

$('.exp').on('click', function() { 
"use strict"; 
$(this).toggleClass("plus_sign minus_sign");  
$(this).toggleClass("plus01 minus01"); 
}); 

Die plus_sign und Minuszeichen Klassen haben jeweils ein Bild auf das Plus und Minus anzuzeigen. Wenn die Klassen wechseln, wenn die Klasse Minuszeichen ist, möchte ich das Minusbild anzeigen. Wenn die Klasse plus_sign ist, möchte ich das Plus-Bild anzeigen und das Minus-Bild ausblenden. Die Bilder sind Hintergrundbilder im CSS.

Danke

Answer 1

Sie machen es zu schwierig.

Setzen Sie zuerst alle .exp Elemente auf das Pluszeichen (wenn der Standardwert das Pluszeichen anzeigen soll). Schalten Sie dann eine Klasse um, die die Klasse umschaltet, sodass das Minus angezeigt wird. Hier einige kurze Code, die Sie dort ankommen sollten ...

$('.exp').on('click', function() { 
    $(this).toggleClass('hide_plus'); 
}); 

Ihre CSS so etwas wie dieses wird:

.exp { 
    background:url(/path/to/plus.gif); 
} 
.hide_plus { 
    background:url(/path/to/minus.gif); 
} 

BTW, du bist besser dran ein Sprite für diese Symbole verwenden und dann Verschieben der Position des Hintergrundbildes. Oder verwende etwas wie Fontawesome.

Hier ist eine grobe Geige mit dem +/- Umschalten ohne Bilder. Das Hinzufügen der Bilder sollte nicht zu schwierig sein.

https://jsfiddle.net/tycahill/1pwbuvga/

Answer 2

seine sehr einfach Sie meine Plunker verweisen Sie bitte auf hier habe ich eine einfache Entscheidung für Sie

$("#clickme").click(function(){ 
    $("#clickme").toggleClass("fa-minus"); 
}); 

und HTML

<ul class="main-menu"> 

    <li data-ui-sref-active="active" class="cursor-pointer"> 
     <a data-ui-sref="dashboard.campaign" href="#/dashboard/campaign"><i class="fa fa-plus" aria-hidden="true" id="clickme"></i><span>click me </span></a> 
    </li>  

</ul> 

Referenz http://plnkr.co/edit/fZ9AQCrO7RAK8wshQsQX?p=info