切换同级元素jquery的可见性

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

display:none

我在每个div的click函数中使用了

#ids

，但是因为我在同一页上有几个div。我想使用一个

.class

，这样我就有了一个单独的类，也就是一个控制可见性的函数

我猜我需要使用

.parent

和

.sibling

类来实现这一点

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

我想提高效率，这样我就不必使用

#id

s为每个div执行此操作。我想知道如何使用单个

.class

，可能是它的父类和同级来执行此操作

另外，我希望在

plus\u-minus

span上有一个减号/加号切换功能。我使用个人

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('-');

}


 });

然而，它似乎不起作用

关于如何实现此+/-切换功能的建议非常受欢迎。

您可以使用来获取

图例

元素，并获取以下同级（即您的

div

）：

如果标记的结构可能会发生变化，则可以使用而不是

.parent（）

，然后使用：

这里有一个。

为什么不试试这个呢

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

你可以试试这个

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

}) ;

或者，您可以在容器div上放置一个类，用于title和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').each(function(){
    $(this).parent().parent().find('.my-toggle-class').slideToggle(); 
});

---

这行不通。父元素是

legend

元素，而toggle元素不是该元素的后代。感谢这一点，但是我不得不删除

legend

之后的

，因为它是legend之后的下一个兄弟元素。是否可以在

next（）

方法中传递一个变量，比如说

next（2）

，使其遍历到下一个第二个元素？您可以传递next（'div'）来选择下一个div元素谢谢，我将尝试一下。请参阅有关加减

切换功能的编辑问题。
$('.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('-');
          }              
      });
})    

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

}) ;

<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();

}) ;

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

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