Question

我正在尝试使jquery slidetoggle适用于类似这样的div

<div id="panel-heading-1"><p>Header</p></div>
  <div id="panel-body-1">
    <p>Text</p>
  </div>
<div id="panel-heading-2"><p>Header</p></div>
  <div id="panel-body-2">
    <p>Text</p>
  </div>
<div id="panel-heading-3"><p>Header</p></div>
  <div id="panel-body-3">
    <p>Text</p>
  </div>

依此类推......由php动态填充

我确实尝试了for循环和.each（），但那些似乎不起作用，或者我做错了！我对Jquery很新，所以请像我一样解释。

Answer 1

为所有标题添加通用标识符（例如：类名）。在OnClick事件slideToggle上相邻的元素。请参阅下面的示例以获取参考和此fiddle

为避免造型，您可以简单地使用http://jqueryui.com/accordion/

HTML：

    <div class="heading" id="panel-heading-1"><p>Header 1</p></div>
    <div id="panel-body-1">
        <p>Text 1</p>
    </div>
    <div class="heading" id="panel-heading-2"><p>Header 2</p></div>
    <div id="panel-body-2">
        <p>Text 2</p>
    </div>
    <div class="heading" id="panel-heading-3"><p>Header 3</p></div>
    <div id="panel-body-3">
        <p>Text 3</p>
    </div>

Jquery的：

    $(".heading").click(function(){
          $(this).next().slideToggle(1300);
    });

Answer 2

好吧，我也不是那么好，也许这不是你想要的，但对我来说似乎是最简单的解决方案：制作几个脚本函数！

首先涉及jquery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

使用此脚本：

<script>
$(document).ready(function(){
$("#panel-heading-1").click(function(){
$("#panel-body-1").slideToggle(1300);
});
$("#panel-heading-2").click(function(){
$("#panel-body-2").slideToggle(1300);
});
});
</script>

我只做了前两个，但是重复一遍。还将面板主体的css属性显示设置为无。像这样：

<style>
#panel-body-1,#panel-body-2,#panel-body-3{
display:none;
}
</style>

确保它们不会被显示，并且每次点击都会切换显示或不显示。

也注意到大写字母T，如果它是一个小案例，它就不起作用。

（1300）是以毫秒为单位的时间，因此1000 = 1秒。

我希望这能帮到你

Jquery，为类似的div滑动切换

2 个答案: