Как добавить, если заявление на функцию переключения

Question

Рассмотрим следующий код, который переключает видимость двух классов с раздельным клик() функции:

<!-- Toggles --> 
<div class="a"></div> 
<div class="b"></div> 

<!-- Result --> 
<div class="x" style="display:none"></div> 
<div class="y" style="display:none"></div> 
<div class="z" style="display:none"></div> 

<!-- Script --> 
$(".a").click(function() { 
var $this = $(this); 
    $this.siblings(".x").toggle(); 
}); 


$(".b").click(function() { 
var $this = $(this); 
    $this.siblings(".y").toggle(); 
}); 

Как бы обновить это так, что любое время, как х и y видны, третий класс, «z» отображается вместо x и y?

Answer 1

Это работает, как показано здесь: http://jsfiddle.net/DKRe2/1/

HTML:

<!-- Toggles --> 
<div class="a">a</div> 
<div class="b">b</div> 
<!-- Result --> 
<div class="x" style="display:none">class x</div> 
<div class="y" style="display:none">class y</div> 
<div class="z" style="display:none">class z</div> 

JS:

<!-- Script --> 
$(".a").click(function() { 

    var $this = $(this); 
    if ($this.siblings(".y").css('display') != 'none' && $this.siblings(".x").css('display') == 'none') { 
     //now Hide y and show Z 
     $this.siblings(".y").toggle(); 
     $this.siblings(".z").toggle(); 
    } else { 
     $this.siblings(".z").css('display', 'none'); 
     $this.siblings(".x").toggle(); 
    } 
}); 


$(".b").click(function() { 
    var $this = $(this); 
    if ($this.siblings(".x").css('display') != 'none' && $this.siblings(".y").css('display') == 'none') { 
     //now Hide y and show Z 
     $this.siblings(".x").toggle(); 
     $this.siblings(".z").toggle(); 
    } else { 
     $this.siblings(".z").css('display', 'none') 
     $this.siblings(".y").toggle(); 
    } 
}); 

Answer 2

Demohttp://jsfiddle.net/Yn3L2/

• API is(':visible')http://api.jquery.com/visible-selector/

Rest должны соответствовать вашим потребностям :)

код

$(".a").click(function() { 
    var $this = $(this); 
    $this.siblings(".x").toggle(); 
    checkZ(); 
}); 

$(".b").click(function() { 
    var $this = $(this); 
    $this.siblings(".y").toggle(); 
    checkZ(); 
}); 

function checkZ() { 
    $('.z').hide(); 
    if ($('.x').is(':visible') && $('.y').is(':visible')) { 

     $('.z').show(); 
    } 
} 

Answer 3

Я думаю, это то, что вы действительно хотите.

Working DEMO

Добавлен JQuery код

function checkZ() { 
    $('.z').hide(); 
    if ($('.x').is(':visible') && $('.y').is(':visible')) { 
     $('.x').hide(500); 
     $('.y').hide(500) 
     $('.z').show(); 
    } 
}