Question

在下面的示例中，默认情况下隐藏所有类别为“ .container2”的3个div。当我单击h2时，它旁边的div应该会打开（正在发生），但是当我再次单击h2时，div不会关闭而是保持打开状态。请帮帮我，为什么它没有切换？

示例：

<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style>
  * {margin:0px;padding:0px;}
  h2{background:#000;color:#fff;margin:10px;border-radius:4px;padding:5px 10px;}
  .container2{background:yellow;color:#000;margin:0px 10px;padding:2px 10px;}
</style>

<script>
  $(document).ready(function(){
    $('.container2').hide();

    $('h2').click(function(){
      $('.container2').hide();
      $(this).next().toggle();
  });
});
</script>

</head>

<body>

<h2>Set-I</h2>
<div class="container2">123</div>

<h2>Set-II</h2>
<div class="container2">456</div>

<h2>Set-III</h2>
<div class="container2">789</div>

</body>

</html>

注意：：一次，我只希望打开最大1格。如果我删除 $('.container2').hide()，一次可能会打开超过1个div，我不想要的！

Answer 1

您需要的是以下行：

$('.container2:visible').not($(this).next()).hide();

此更改将实现预期的行为。

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    
    h2 {
      background: #000;
      color: #fff;
      margin: 10px;
      border-radius: 4px;
      padding: 5px 10px;
    }
    
    .container2 {
      background: yellow;
      color: #000;
      margin: 0px 10px;
      padding: 2px 10px;
    }
  </style>

  <script>
    $(document).ready(function() {
      $('.container2').hide();

      $('h2').click(function() {
        $('.container2:visible').not($(this).next()).hide();
        $(this).next().toggle();
      });
    });
  </script>

</head>

<body>

  <h2>Set-I</h2>
  <div class="container2">123</div>

  <h2>Set-II</h2>
  <div class="container2">456</div>

  <h2>Set-III</h2>
  <div class="container2">789</div>

</body>

</html>

Answer 2

隐藏当前已切换的所有内容

<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style>
  * {margin:0px;padding:0px;}
  h2{background:#000;color:#fff;margin:10px;border-radius:4px;padding:5px 10px;}
  .container2{background:yellow;color:#000;margin:0px 10px;padding:2px 10px;}
</style>

<script>
  $(document).ready(function(){
    $('.container2').hide();

    $('h2').click(function(){
      var container2 = $(this).next();
      $('.container2').not(container2).hide();
      container2.toggle();
  });
});
</script>

</head>

<body>

<h2>Set-I</h2>
<div class="container2">123</div>

<h2>Set-II</h2>
<div class="container2">456</div>

<h2>Set-III</h2>
<div class="container2">789</div>

</body>

</html>

Answer 3

您需要分两个步骤进行操作。

步骤1：隐藏所有h2 div。

步骤2：仅切换当前next() h2格。

，您应该使用传递给.hide()的回调函数来做到这一点，以确保仅在该函数完成其他div的隐藏之后才执行。

<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style>
  * {margin:0px;padding:0px;}
  h2{background:#000;color:#fff;margin:10px;border-radius:4px;padding:5px 10px;}
  .container2{background:yellow;color:#000;margin:0px 10px;padding:2px 10px;}
</style>

<script>
  $(document).ready(function(){
    $('.container2').hide();

    $('h2').click(function(){
      
      var btn = $(this).next();
      $('.container2').hide(function(){
          btn.toggle();
      });
      
  });
});
</script>

</head>

<body>

<h2>Set-I</h2>
<div class="container2">123</div>

<h2>Set-II</h2>
<div class="container2">456</div>

<h2>Set-III</h2>
<div class="container2">789</div>

</body>

</html>

jQuery切换不适用于next（）函数

3 个答案: