2

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

我已经#ids在每个 div 的点击功能中使用过，但是因为我在同一页面上有多个 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('-');

}


 });

但是，它似乎不起作用。

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

4

5 回答 5

3

为什么不试试这个

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

更新的小提琴

于 2012-09-25T07:32:36.840 回答
3 
$('#show_table').click(function(){
    $(this).parent().parent().find("div.toshow").slideToggle();
});
于 2012-09-25T07:37:02.583 回答
2

您可以使用.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();
});

这是一个工作示例。

于 2012-09-25T07:32:33.547 回答
1

你可以试试这个

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

}) ;
于 2012-09-25T07:33:57.480 回答
1

你可以试试这个： 

$('.show_table').each(function(){
    $(this).parent().parent().find('.my-toggle-class').slideToggle(); 
});
于 2012-09-25T07:34:27.690 回答