Question

我有2个div，里面有2个div，就像这个

<div id="div1" class="div">
    <div class="flip">Click to slide down panel</div>
    <div class="panel">Hello world!</div>
</div>

<div id="div2" class="div">
    <div class="flip">Click to slide down panel</div>
    <div class="panel">Hello world!</div>
</div>

我的JavaScript是

$(document).ready(function(){
    $(".flip").click(function(){
         $( ".panel" ).children( ".panel" ).slideToggle("slow");
    });
});

示例位于https://jsfiddle.net/msjaasfk/2/

所以我希望当点击一个.flip时，只显示同一div中的.panel而不是所有带.panel类的div。

Answer 1

您正在选择并切换所有的.panel元素。修改您的代码，以便只切换与所单击元素对应的.panel元素：

Updated Example

$(".flip").click(function() {
  $(this).next().slideToggle("slow");
});

this是对点击的.flip元素
.next() method将选择下一个兄弟元素（在本例中为.panel）。

作为旁注，您还可以修改代码，以便一次只打开一个面板：

Updated Example

$(".flip").click(function() {
  $('.panel').not($(this).next()).slideUp();
  $(this).next().slideToggle("slow");
});

.panel,
.flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}
.panel {
  padding: 50px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="div">
  <div class="flip">Click to slide down panel</div>
  <div class="panel">Hello world!</div>
</div>

<div id="div2" class="div">
  <div class="flip">Click to slide down panel</div>
  <div class="panel">Hello world!</div>
</div>

Answer 2

在您的上下文中，.panel将选择panel类的所有元素。在.flip元素的点击事件中，您可以使用jQuery的.next()仅选择下一个.panel您可能需要指定.panel选择器，以防您的HTML结构在div内部改变

$(this).next(".panel").slideToggle("slow");

这是完整的例子

$(document).ready(function() {
  $(".flip").click(function() {
    $(this).next(".panel").slideToggle("slow");
  });
});

.panel,
.flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}
.panel {
  padding: 50px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="div">
  <div class="flip">Click to slide down panel</div>
  <div class="panel">Hello world!</div>
</div>

<div id="div2" class="div">
  <div class="flip">Click to slide down panel</div>
  <div class="panel">Hello world!</div>
</div>

如何在仅点击已点击元素

2 个答案: