Question

我终于找到了一种方法让它工作，但代码有点长，我确信有更好的方法。这是我想要的，但是我想扩展它以便在10个左右的div上工作，如果我使用这个方法，代码将是荒谬的。我尝试过使用.each（）方法但它只会导致进一步的挫败感。如果有人能指出我正确的方向，我会非常感激。这是我到目前为止的一个小说：http://jsfiddle.net/QbsbD/47/

$(document).ready(function() {
    $('#btn1').click(function() {
        if ('#div2:visible') {
            $('#div2').hide('fast');
        }
        if ('#div3:visible') {
            $('#div3').hide('fast');
        }
        $('#div1').slideToggle("slow");
    });
    $('#btn2').click(function() {
        if ('#div1:visible') {
            $('#div1').hide('slow');
        }
        if ('#div3:visible') {
            $('#div3').hide('slow');
        }
        $('#div2').slideToggle("slow");
    });
    $('#btn3').click(function() {
        if ('#div1:visible') {
            $('#div1').slideUp('slow');
        }
        if ('#div2:visible') {
            $('#div2').slideUp('slow');
        }
        $('#div3').slideToggle("slow");
    });
});

Answer 1

我已经编辑了你的代码。立即尝试：

http://jsfiddle.net/QbsbD/48/

新JS：

$(document).ready(function() {
    $('.buttons').click(function() {
        $('.hdDivs').hide('slow');
        $('#' + $(this).attr('divid')).slideToggle("slow");
    });
});

我在div和按钮之间添加了一个关联（divid），如下所示：

<input type="button" value="Show Div1" class="buttons" id="btn1" divid="div1" />  
<input type="button" value="Show Div2" class="buttons" id="btn2" divid="div2" />
<input type="button" value="Show Div3" class="buttons" id="btn3" divid="div3" />

Answer 2

<强> HTML ：

<input type="button" value="Show Div1" class="buttons" data-content-id="div1"/>  
<input type="button" value="Show Div2" class="buttons" data-content-id="div2" />
<input type="button" value="Show Div3" class="buttons" data-content-id="div3" />

<强> JS ：

$('#container').on('click', '.buttons', function() {

    var content = $(this).data('contentId');
    $('.hdDivs').not('#' + content).hide('slow');
    $('#' + content).slideToggle("slow");
});

您将使用数据attr存储要显示的div，然后在单击按钮时获取它。

demo

Answer 3

您可以选择点击的按钮索引！

$('.buttons').click(function(){
    var DIV = $('.hdDivs').eq( $(this).index() );
    DIV.is(':visible') ? DIV.slideToggle() : ($('.hdDivs').slideUp(), DIV.slideDown());
});

jsFiddle demo

P.S ...如果您不喜欢幻灯片效果，只需将其替换为.show('slow')和.hide('slow')以及.toggle('slow')：

DIV.is(':visible') ? DIV.toggle('slow') : ($('.hdDivs').hide('slow'), DIV.show('slow'));

Answer 4

我会使用这个功能：

 .siblings()

在jquery网站上查看： http://api.jquery.com/siblings/

这里是jsfiddle： http://jsfiddle.net/mcLyv/2/

$(document).ready(function() {

$('.buttons').click(function() {
     var index = $(this).attr('id').substring(3);

     $('.container')
       .find('.hdDivs')
       .eq(index-1)
       .slideToggle("slow")
       .siblings()
       .hide('slow');
      });

});

在JQuery中编写隐藏Div切换的更好方法？

4 个答案:

jsFiddle demo