Question

我的页面上有几个DIV，我希望能够展开/折叠。我正在使用下面的代码这样做，但它只适用于整个类..我可以将它应用于被点击的任何内容吗？（例如，self.slideToggle（）;）

// Activate Toggle for Showing / Hiding More Price Tables
        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    return false;
    });

});

编辑：以下是标记示例：

<a href="#" class="show_hide">Video & Music</a>
    <div class="slidingDiv">CONTENT HERE</div>

Answer 1

这样可行。

$('.show_hide').click(function(){
      $(this).next('.slidingDiv').slideToggle();
      return false;
});

jsfiddle - http://jsfiddle.net/ABrunkhorst/vFnqp/1/

Answer 2

在点击事件中使用$(this)。

或者如果你点击div中的内容，那么就像父关键字一样。

所以$(this).parent(".slidingDiv").slideToggle();

修改

根据你的编辑，我认为你也可以使用它;

$(this).next('.slidingDiv')

Answer 3

在函数调用中使用$(this)将引用范围内的对象，在这种情况下是单击的对象。

$('.show_hide').click(function(){
   $(this).next('.slidingDiv').slideToggle();
   return false;
});

您可以考虑代替next()：

children() - 仅选择第一级儿童
contents() - 如果您想要点击所有元素的所有后代（儿童+孩子的子女）
siblings() - 获取层次结构树中同一级别的所有元素
prev() - 获取上一个兄弟
next() - 获取第一个兄弟
prevAll() - 以获取所有以前的兄弟姐妹
nextAll() - 以获取所有下一个兄弟姐妹
parents() - 获取所点击元素的anscestors（包装）

Answer 4

我们可以使用JQUERY UI Accordion，我们可以使用它来高效切换。我们必须添加以下JQuery链接

   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script>  $(function() {   
    $( "#accordion" ).accordion(); 
    });  
   </script> 
   <div id="accordion"> 
   <h3>Section 1</h3>
   <div>   
   <p>This is division 1  
   </p></div>  
   <h3>Section 2</h3>
   <div>
   <p>This is division2</p></div>

有关详细信息，请参阅此http://jqueryui.com/accordion/

Javascript：使用简单代码展开/折叠多个DIV？

4 个答案: