Question

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

我在每个div的click函数中使用了#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

Answer 2

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

Answer 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。

Answer 4

你可以试试这个

$('.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').on('click', function(){
   $(this).closest('.container').find(".toshow").slideToggle();

}) ;

Answer 5

你可以试试这个：

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

切换兄弟元素jquery的可见性

5 个答案: