如何添加一個if語句來切換功能

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(); 
}); 

我怎麼會更新這個讓任何時候x和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

演示http://jsfiddle.net/Yn3L2/

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

其餘的應該滿足您的需求:)

代碼

$(".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(); 
    } 
}