Question

考虑以下代码，该代码使用单独的click（）函数切换两个类的可见性：

<!-- 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/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 2

此处的效果如下所示：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 3

我认为这是你真正想要的。

Working DEMO

添加了jQuery代码

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

如何将if语句添加到切换函数

3 个答案: