代码之家 › 专栏 › 技术社区 › Deadpool

jQuery切换不使用next()函数

toggle html jquery javascript

Deadpool · 技术社区 · 6 年前

在下面的示例中,默认情况下,“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个DIV。如果我移除 $('.container2').hide() 一次可以打开一个以上的潜水器, 我不想要!

3 回复 | 直到 6 年前

madalinivascu 6 年前

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

<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>

Jai 6 年前

你需要的是这条线:

$('.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>

Ahmad 6 年前

你需要分两步来完成。

步骤1:全部隐藏 h2 div。

第二步:只切换当前 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>