Question

我遇到了可折叠的jquery代码问题。

我想分开一些DIV，但如果我点击一个元素，无论哪个，它都会打开所有其他元素。我必须使用更多这些可折叠的东西（aprox.40件，因为在一个页面中有很多版本，我必须保存一些地方）。我想知道如何将DIV彼此分开。这是我的代码：

<script type="text/javascript"
 src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
  $(".flip").click(function() {
   $(".panel").slideToggle("slow");
  });
 });
</script>

<style type="text/css">
div.panel,p.flip {
 margin: 0px;
 padding: 5px;
 text-align: center;
 background: #FFCFF9;
 border: solid 1px #fff;
}

div.panel {
 widht: 50%;
 height: 100px;
 display: none;
}
</style>
</head>
 <div class="panel" id="1">
  <p>Fist panel text</p>
 </div>
 <p class="flip" id="1">1st version</p>
 <div class="panel" id="2">
  <p>Second panel text</p>
 </div>
 <p class="flip" id="2">2nd version</p>

起初我试过这个： http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm 但也有一个问题;它只显示第一个DIV的内容，其余的不会下降。我不知道我是否应该为DIV命名（正如你在代码中看到的那样，我已经尝试过），但如果我这样做，我就不知道是什么了正确的方法。如果可以，请帮帮我。谢谢！

Answer 1

这是一个带有工作版本的JS小提琴。

https://jsfiddle.net/b3bc4yk6/

您的代码无效的主要原因是您没有定位要扩展/收缩的div，而是将它们全部定位。正如你从HTML中看到的那样，我给每个面板都有自己的ID。

<div class="panel" id="panel-1">
  <p>Fist panel text</p>
 </div>
 <p class="flip" id="1">1st version</p>
 <div class="panel" id="panel-2">
  <p>Second panel text</p>
 </div>
 <p class="flip" id="2">2nd version</p>

另请注意，ID应该是唯一的，因此翻转元素和面板元素不应具有相同的ID。

现在在jquery中我们可以获取翻转的ID并定位特定的面板。

$(document).ready(function() {
  $(".flip").click(function() {
   $("#panel-" + $(this).attr('id')).slideToggle("slow");
  });
 });

希望有所帮助！

Answer 2

首先，我想提醒您，ID必须是唯一的。在您的示例中，有两个元素，id =“1”，两个元素id =“2”。

您还可以将每个面板/翻转组合包装在容器div中。

HTML：

<div class="panelContainer">
   <div class="panel">
      <p>Fist panel text</p>
   </div>
   <p class="flip" id="1">1st version</p>
</div>
<div class="panelContainer">
   <div class="panel" id="2">
      <p>Second panel text</p>
   </div>
   <p class="flip" id="2">2nd version</p>
</div>

在你的js中，你为每个元素添加了一个点击功能，其中“flip”类用类“panel”切换所有元素。

您要做的是切换与单击的翻转对应的面板。

JS：

<script type="text/javascript">
  $(document).ready(function() {
     $(".flip").each(function(){
        $(this).click(function() {
               $(this).closest(".panelContainer").find(".panel").slideToggle("slow");
            });
         });
       });
    </script>

没有测试过代码，但你应该得到一般的想法。

Answer 3

试试这个：

<script type="text/javascript">
  $(document).ready(function() {
    $(".flip").click(function() {
      $(this).next(".panel").slideToggle("slow");
    });
  });
</script>

单独显示/隐藏jquery？

3 个答案: