首页 文章

使用jQuery切换隐藏内容div？

提问于
浏览 次
0

我试图显示/隐藏一些基本的内容div . 我认为问题在于使用 .toggle 函数，这不是函数的问题，而是我想要/需要的东西 . 目前，他们工作，因为我相信他们的设计， show on click, hide on click . 我的问题是，如果点击任何其他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都被隐藏 . ）

谢谢！

javascript jquery toggle show-hide

3 回答

  • 0

    试试：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复制代码 .

    NOTE: 我会进一步简化这个，而不是使用 id 我会使用 data-index=1 或2,3,4或5 .

    回复于
  • 0

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

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

    像这样...

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

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

    希望这可以帮助

    回复于
  • 0

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

    检查JsFiddle solution .

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

    回复于

相关问题