分开显示/隐藏jquery？

pinkon5k 于 2022-12-03 发布在 jQuery

关注(0)|答案(3)|浏览(193)

我有一个可折叠的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>

起初我试着这样做：但是也有一个问题;它只显示第一个DIV的内容，其余的不会显示出来。我不知道我是否应该命名DIV（正如您在代码中看到的，我已经尝试过了），但如果我这样做，我不知道什么是正确的方法。如果可以的话，请帮助我。谢谢！

jquery

来源：https://stackoverflow.com/questions/37329383/separate-show-hide-jquery

3条答案

按热度按时间

r8xiu3jd1#

这里是一个JS小提琴与一个工作版本。
https://jsfiddle.net/b3bc4yk6/
你的代码不起作用的主要原因是你没有瞄准你想扩展/收缩的div，你瞄准了所有的div。

<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");
  });
 });

希望这对你有帮助！

赞(0）回复(0）举报 2022-12-03

jdzmm42g2#

试试这个：

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

赞(0）回复(0）举报 2022-12-03

k3fezbri3#

首先，我想提醒你id必须是唯一的，在你的例子中有两个id=“1”的元素和两个id=“2”的元素。
您还可以将每个面板/翻转组合 Package 在容器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”的元素放置一个click函数，以切换所有类为“panel”的元素。
您要做的是切换与单击的翻转相对应的面板。
詹：

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

我还没有测试代码，但是你应该知道大致的意思。

赞(0）回复(0）举报 2022-12-03

我来回答

分开显示/隐藏jquery？

3条答案

相关问题

热门标签

最新问答