分开show/hidejquery？

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的内容，其余的不会下来。我不知道我是否应该命名 DIVs（正如你在代码中看到的那样，我已经试过了），但如果我这样做，我不知道正确的做法是什么它。如果可以的话，请帮帮我。谢谢！

Answer 1

这是一个 JS fiddle 的工作版本。

https://jsfiddle.net/b3bc4yk6/

您的代码不起作用的主要原因是您没有针对您想要 expand/contract 的 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 中，您为带有 class "flip" 的每个元素放置了一个点击函数，以切换带有 class "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>

分开show/hidejquery？

Separate show/hide jquery?

jquery

html

show-hide

collapse