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

我终于找到了一种方法来实现它，但是代码有点冗长，我相信有更好的方法来实现它。这正是我想要的，但我想将其扩展到10个左右的div，如果我使用这种方法，代码将是荒谬的。我尝试过使用.each（）方法，但它只会导致进一步的挫折。如果有人能给我指出正确的方向，我将不胜感激。以下是我到目前为止所掌握的一些知识：

---

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

新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" />

---

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" />

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

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

​您将使用data attr存储要显示的div，然后单击按钮即可获得该div

---

您可以点击按钮索引

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

附言。。。如果您不喜欢幻灯片效果，只需将其替换为

.show（'slow'）

和

.hide（'slow'）

和

.toggle（'slow'）

：

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

---

我将使用此功能：

 .siblings()

请在jquery网站上查看：

以下是JSFIDLE：

---

您应该在这里发布更改，特别是关于html的更改。

 .siblings()

$(document).ready(function() {

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

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

});​