jQuery Wenn ein Element sichtbar ist, schließen Sie das andere

Question

Ich frage mich, ob es eine Möglichkeit gibt, ein Element zu verbergen, nachdem ein anderes Element sichtbar wird. Hier ist meine jQuery-Code jetzt

var fade = $("#listofeffects ul:nth-of-type(2)"); 
var firstchild = $("#listofeffects ul:first-child"); 

    firstchild.click(function(){ 
    $(".element1").fadeToggle(); 
    }); 

    fade.click(function(){ 
    $(".element2").fadeToggle(); 
    }); 

Wenn .element1 sichtbar ist, .element2 nicht gezeigt werden kann. Ich habe recherchiert mit if/else Javascript-Anweisungen, aber habe nichts gefunden, was funktioniert. Ich habe auch nachgesehen mit: sichtbar und: versteckt, was auch nicht funktioniert hat.

Danke.

Answer 1

Unter der Annahme, dass Ihr HTML verschiedenen events an 2 verschiedenen <ul> ‚s hat,

var firstchild = $("#listofeffects ul:first-child"); 
    var fade  = $("#listofeffects ul:nth-of-type(2)"); 
    $('.element2').hide();   // initially show only .element1  

    $("#listofeffects").on('click','ul',function(e){ 
     $('.element1,.element2').hide(); 
     ($(e.currentTarget).is(firstchild)) ? $('.element1').fadeIn('slow') : $('.element2').fadeIn('slow') ; 
    }); 

see demo

Answer 2

Versuchen Sie dies. Erste ausblenden Alle Elemente auf klicken und nach zeigen geklickt Element mit jQuery (diese)

zB:

jQuery(document).ready(function(){ 
    var ulchild = jQuery("#listofeffects ul"); 
    ulchild.click(function(){ 
     jQuery("#listofeffects ul").hide("slow"); 
     jQuery(this).show(slow); 
    }); 
}); 

Answer 3

Wenn Ihr Code wie dieser ist

<div class="div1 divClass"> Div 1 text </div> 
<div class="div2 divClass"> Div 2 text </div> 
<div class="div3 divClass"> Div 3 text </div> 
<div class="div4 divClass"> Div 4 text </div> 

Jquery-Code, dies zu tun.

$(".divClass").click(function(){ 
    $(this).siblings().addClass("hide"); 
}); 

Dieser Jquery-Code wird das geklickt Element zeigen und andere Elemente automatisch ausgeblendet werden wird ...