jquery - 切换兄弟元素jquery的可见性

Question

我在一个页面上有几个 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(); 
})

我想提高效率，这样我就不必为每个使用 #id 的 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('-');

}


 });

不过好像不行。

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

Answer 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