Question

我正试图在网站上实现切换效果。 html看起来像这样：

<div class="prod-toggle-click">
  <h2>Test</h2>
    <div class="prod-toggle">
      <p>test</p>
    </div>
</div>
<div class="prod-toggle-click">
  <h2>Test 2</h2>
   <div class="prod-toggle">
    <p>test 2</p>
   </div>
</div>

和JS：

<script>
$(".prod-toggle-click").click(function(){
    $(this).parent().find('.prod-toggle').toggle();
});
</script>

这会切换两个div的.prod-toggle。但我只需要父母的.prod-toggle来切换。

我试过这样的话：

<script>
$(".prod-toggle-click").click(function(){
    $(this).next('.prod-toggle').slideToggle();
});
</script>

但这也不起作用。有什么建议吗？

Answer 1

您只需使用find('.prod-toggle')并删除您正在使用的parent()或next()即可。这是因为div类prod-toggle位于div内，类prod-toggle-click，因此find()只适合您。

$(".prod-toggle-click").click(function(){
    $(this).find('.prod-toggle').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prod-toggle-click">
  <h2>Test</h2>
    <div class="prod-toggle">
      <p>test</p>
    </div>
</div>
<div class="prod-toggle-click">
  <h2>Test 2</h2>
   <div class="prod-toggle">
    <p>test 2</p>
   </div>
</div>

Answer 2

您需要将其放在$（document）.ready下，并删除parent（）

$(document).ready(function () {
  $(".prod-toggle-click").click(function(){
    $(this).find('.prod-toggle').toggle();
  });
});

Answer 3

对于这种特定情况，我会使用children()代替find()。它只查看节点的直接子节点。它更明确，这是我偏好的原因。我想性能不是问题，但children()也应该更快。

$(".prod-toggle-click").click(function(){
    $(this).children(".prod-toggle").toggle();
});

jQuery用这个类切换下一个div

3 个答案: