如何添加一个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(); 
    } 
}