Переключатель jQuery не работает с функцией next () - PullRequest
Новая
       8

Переключатель jQuery не работает с функцией next ()

0 голосов
/ 20 ноября 2018

В следующем примере все 3 div с классом ".container2" скрыты по умолчанию.Когда я щелкаю 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 делителя, чего я не хочу!

Ответы [ 3 ]

0 голосов
/ 20 ноября 2018

Скрыть все, кроме текущего переключенного 

<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>
0 голосов
/ 20 ноября 2018

Вам нужна эта строка: 

$('.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>
0 голосов
/ 20 ноября 2018

Это необходимо сделать в два этапа.

шаг 1: скрыть все h2 деления.

шаг 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>
...