单独的显示/隐藏jquery？

Question

我对可折叠的 jquery 代码有疑问。

我想分隔一些 DIV，但如果我单击一个元素，无论是哪个元素，它都会打开所有其他元素。我必须使用更多这些可折叠的东西（大约 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 fiddle。

https://jsfiddle.net/b3bc4yk6/

您的代码不起作用的主要原因是您没有针对要扩展/收缩的 div，而是针对所有这些 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

试试这个：

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

Answer 3

首先，我想提醒您，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 中，您为每个具有“翻转”类的元素添加了一个点击功能，以切换具有“面板”类的所有元素。

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

Js：

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

尚未测试代码，但您应该了解大致的概念。