4

我终于找到了一种让它工作的方法，但是代码有点冗长，我相信有更好的方法来做到这一点。这是我想要的，但我想将其扩展到 10 个左右的 div 上，如果我使用这种方法，代码会很荒谬。我尝试过使用 .each() 方法，但这只会导致进一步的挫败感。如果有人能指出我正确的方向，我将不胜感激。这是我到目前为止所拥有的 jFiddle：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");
    });
});​
4

4 回答 4

3

我已经编辑了你的代码。现在就试试：

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

新JS：

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

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

<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" />
于 2012-07-15T17:31:00.957 回答
1

网页：

<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");
});

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

演示

于 2012-07-15T17:58:02.817 回答
0

你可以去点击按钮索引！

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

jsFiddle 演示

PS ...如果您不喜欢幻灯片效果，只需将其替换为.show('slow')and .hide('slow')and .toggle('slow')：

DIV.is(':visible') ? DIV.toggle('slow') : ($('.hdDivs').hide('slow'), DIV.show('slow'));
于 2012-07-15T18:05:33.997 回答
0

我会使用这个功能：

 .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');
      });

});​
于 2012-07-15T18:12:12.293 回答