Question

当有另一个切换时如何隐藏切换，如果用户在里面显示一个并且你隐藏在内部的那个之外的那个保持在那里？它也应该被隐藏。

我不清楚所以这里是更新的例子：http://jsfiddle.net/jalxob/hEusd/5/

$('input[type="checkbox"]').click(function(){
if($(this).val()=="checking"){
    $(".open-box").toggle();
    if("none" == $(".open-box").css("display")) { 
        $(".box1").css("display", "none");
    }
}
});

$('.open-box').click(function() {
$(".box1").slideToggle();
});

Answer 1

在你的jsfiddle中，box2不在box1中。如果你把它放在box1中，那么它将被隐藏。如果您需要将其留在室外，请添加以下内容：

$('input[type="checkbox"]').click(function(){
    if($(this).val()=="checking"){
        $(".box1").toggle();
        if("none" == $(".box1").css("display")) { // ADD THIS IF BLOCK
            $(".box2").css("display", "none");
        }
    }
});

$('.open-box').click(function() {
    $(".box2").slideToggle();
});

Answer 2

您需要将两个框都放在容器中，然后更改它以便单击复选框切换容器div。

请参阅此处的示例：JSFiddle

我更改了HTML以将这两个框放在这样的div中：

<input type="checkbox" value="checking">
<div class="box-container">
    <div class="box1">
        <a href="#" class="open-box">Show next box</a>
    </div>
    <div class="box2"></div>
</div>

并更改了复选框点击事件以切换容器：

$(".box-container").toggle();

Answer 3

这解决了它，这很容易解决：http://jsfiddle.net/digitalextremist/2PcWV/2

<input type="checkbox" value="checking">

<div class="box1">
    <a href="#" class="open-box">Show next box</a>
    <div class="box2"></div>
</div>

<强>更新

在您澄清之后，这是一个新的代码段：http://jsfiddle.net/digitalextremist/Jm4L6/1

就是这样：

$('input[type="checkbox"]').click(function () {
    if (this.checked) {
        $(".open-box").show();
    } else {
        $(".open-box").hide();
        $(".box1").hide();
    }
});

$('.open-box').click(function () {
    $(".box1").slideToggle();
});

使用此HTML：

<input type="checkbox"> <a href="#" class="open-box">Show next box</a>

<div class="box1"></div>

这涉及到这里讨论的想法：How to check whether a checkbox is checked in jQuery?

第三次更新应该涵盖你提出的所有问题：

http://jsfiddle.net/digitalextremist/Jm4L6/2/

Answer 4

您不应该使用$(this).val()=="checking"，因为无论是否选中该复选框，它都将始终返回true。

我会选择这样的东西：

http://jsfiddle.net/hEusd/12/

隐藏切换内的切换

4 个答案: