切换兄弟元素 jquery 的可见性答案

【问题标题】：Toggle visibility of sibling element jquery切换兄弟元素 jquery 的可见性
【发布时间】：2012-09-25 07:29:52
【问题描述】：

我在一个页面上有几个 div。每个 div 都有一个标题，我可以单击该标题来切换相应 div 的可见性。默认情况下，div 设置为display:none。

我在每个 div 的点击功能中都使用了#ids，但是因为我在同一页面上有多个 div。我想使用一个.class，这样我就有一个类，因此我有一个控制可见性的函数。

我猜我需要使用 .parent 和 .sibling 类来执行此操作。

以下是我的代码的摘录： HTML：

<div> 
    <legend>
        <a id="show_table" class="show_table" href="#">
            <span id="plus_minus"></span>Div
        </a>
    </legend>
    <div class="toshow" id="toshow">Div to be shown</div>
</div>

JS：

$('#show_table').click(function(){
    $("#toshow").slideToggle(); 
})

我想提高效率，这样我就不必使用 #ids 为每个 div 执行此操作我想知道如何使用单个 .class ，可能是父母和兄弟姐妹它来做这个。

作为补充，我希望在plus_minus 范围上具有减号/加号切换功能。我使用个人 ids 进行了相同的工作。我如何能够使用单个.class 来实现这一点。我尝试使用以下方法：

$('.div_show').click( function(){

$(this).parent().next().slideToggle();

if($(this).parent().next().is(':visible'){

$(this).closest('span').find('plus_minus').text('+');

}

else {

$(this).closest('span').find('plus_minus').text('-');

}


 });

但它似乎不起作用。

感谢有关如何实现此 +/- 切换功能的建议。

【问题讨论】：

标签： jquery html toggle

【解决方案1】：

为什么不试试这个

$('.show_table').click(function(){

    $(this).parent().next().slideToggle();

})

更新代码

因为您使用的是 SlideToggle，所以对 DOM 的更改不容易更新。所以您必须在它的回调函数中处理可见性问题..

试试这个代码

$('.show_table').click(function(){
      var $elem = $(this);
      $(this).parent().next().slideToggle('slow', function() {
          if($(this).is(':visible')){
             $elem.find('span').html('+');
          }
          else{
             $elem.find('span').html('-');
          }              
      });
})

UPDATED FIDDLE

【讨论】：

感谢这个工作，但是我不得不在legend 之后删除<hr/>，因为它是传奇之后的下一个兄弟。是否可以在 next() 方法中传递一个变量，例如 next(2)，以便遍历到第二个下一个元素？
可以通过 next('div') 选择下一个 div 元素
谢谢，会试试的。请参阅关于加减 toggle 功能的已编辑问题。

【解决方案2】：

$('#show_table').click(function(){
    $(this).parent().parent().find("div.toshow").slideToggle();
});

【讨论】：

【解决方案3】：

您可以使用.parent() 获取legend 元素，并使用.next() 获取以下同级（即您的div）：

$(".show_table").click(function () {
    $(this).parent().next().slideToggle();
});

如果您的标记可能在结构上发生变化，您可以通过使用.closest() 而不是.parent()，然后使用.find() 使其更加灵活：

$(".show_table").click(function () {
    $(this).closest("div").find(".toshow").slideToggle();
});

这是working example。

【讨论】：

【解决方案4】：

你可以试试这个

$('.show_table').on('click', function(){
   $(this).closest('div').find(".toshow").slideToggle();

}) ;

或者你可以在你的容器 div 上放置一个类作为标题和 div

<div class='container'> 
  <legend>
     <a id="show_table" class="show_table" href="#">
       <span id="plus_minus"></span>Div
     </a>
   </legend>

   <div class = "toshow" id = "toshow" >Div to be shown</div>

 </div>

那你可以试试这个

$('.show_table').on('click', function(){
   $(this).closest('.container').find(".toshow").slideToggle();

}) ;

【讨论】：

【解决方案5】：

你可以试试这个：

$('.show_table').each(function(){
    $(this).parent().parent().find('.my-toggle-class').slideToggle(); 
});

【讨论】：

这行不通。父元素是legend 元素，而切换元素不是它的后代。