Question

我正在尝试显示/隐藏一些基本内容div。我认为问题在于使用 .toggle 函数，这不是函数的问题，但我不确定这是否是我想要/需要的。目前，他们工作，我相信他们的设计， 点击显示，隐藏点击 。我的问题是，如果点击任何其他div，我希望div自动隐藏。以下代码仅用于在单击时显示相应的元素，并且需要再次单击它们以隐藏它们：

$('#open1').click(function() {
    $('#content1').toggle();
});

$('#open2').click(function() {
    $('#content2').toggle(); 
});

$('#open3').click(function() {
    $('#content3').toggle(); 
});

$('#open4').click(function() { 
    $('#content4').toggle();
});

$('#open5').click(function() {
    $('#content5').toggle();
});

问题在于 - 当您单击＃open1的元素时，会显示＃content1。你必须再次点击＃open1来隐藏它。否则，如果单击＃open2的元素而不事先单击＃open1进行隐藏，则会显示＃content1和＃content2。我很确定这是使用 .toggle ...

的本质

我尝试了一些使用 .fadeIn ， .slideUp 和 .slideDown 以及 .slideToggle 的不同组合但似乎无法让所有内容div适当隐藏。

所以我的问题是，如何重新编写上面的代码，以便只有同时显示相应的元素，而无需再次点击隐藏div？ （换句话说，当点击＃open2时，所有BUT＃content2都被隐藏。）

谢谢！

Answer 1

尝试：Working Fiddle

<强> HTML

<button type="button" id="open1" class="open"></button>
<button type="button" id="open2" class="open"></button>
<button type="button" id="open3" class="open"></button>
<button type="button" id="open4" class="open"></button>
<button type="button" id="open5" class="open"></button>

<div id="content1" class="content-div"></div>
<div id="content2" class="content-div"></div>
<div id="content3" class="content-div"></div>
<div id="content4" class="content-div"></div>
<div id="content5" class="content-div"></div>

<强> JS

$('.open').click(function() {
    var idNum = $(this).attr('id'); //open1 or open2 ...

    // get corresponding content to toggle
    idNum = idNum.replace('open', 'content');

    // hide all visible content divs except current one
    $('.content-div:visible:not(#' + idNum + ')').hide();

    // show the current content div only
    $(idNum).toggle();
});

此代码简化了，因此您不必为将来可能添加的额外按钮/ div复制代码。

注意：我会进一步简化此操作，而不是使用id我会使用data-index=1或2,3,4或5。

Answer 2

你可以添加一个if条件来检查其他div的切换状态，当它们可见时，然后使用这个来应用切换命令......

$("OTHERDIVS").is(":visible")

像这样......

$('#open2').click(function() {
       /* for statement 1 thru div count 
       if  $("OTHERDIVS").is(":visible") then .toggle them*/
       $('#content2').toggle(); 
});

上面的代码片段只是一个骨架而非实际代码。

希望这会有所帮助

Answer 3

我建议你为这个问题创建一些通用解决方案。

检查JsFiddle solution。

这里的想法是根据您的项目需求设置data-target和data-group。

使用jQuery切换隐藏内容div？

3 个答案: