переключить, закрыть активную, нажав на нее - PullRequest
Новая
       1

переключить, закрыть активную, нажав на нее

0 голосов
/ 17 марта 2020

У меня есть этот код переключения, но я бы хотел его изменить. Я хотел бы добавить возможность закрыть активную, просто нажав на нее. как я могу это сделать? поэтому все вопросы показаны, теперь, если вы нажмете на вопрос, он показывает ответ. если вы нажмете другой вопрос, он закрывает активный. Но вы не можете нажать на активную, чтобы закрыть.

Код: 

    (function () {
            var $box = $('.acc-box');
            $box.each(function () {

                var $trigger = $('.acc-trigger', this);
                $trigger.first().addClass(':hidden').next().slideUp(300);

                $trigger.on('click', function () {
                    var $this = $(this);
                    if ($this.data('mode') === 'toggle') {
                        $this.toggleClass('active').next().stop(true, true).slideToggle(300);
                    } else if ($this.next().is(':hidden')) {
                        $trigger.removeClass('active').next().slideUp(300);
                        $this.toggleClass('active').next().slideDown(300);
                    }
                    return false;
                });
            });
        }());

HTML

<div class="acc-box">

   <span data-mode='' class='acc-trigger'>
    <a href='#'>QUESTION</a>
   </span>
   <div class='acc-container'>
   <p>ANSWER</p>
   </div><!--/ .acc-container-->    

<span data-mode='' class='acc-trigger'>
    <a href='#'>QUESTION2</a>
   </span>
   <div class='acc-container'>
   <p>ANSWER2</p>
   </div><!--/ .acc-container-->    

<span data-mode='' class='acc-trigger'>
    <a href='#'>QUESTION3</a>
   </span>
   <div class='acc-container'>
   <p>ANSWER3</p>
   </div><!--/ .acc-container-->    

</div>```

1 Ответ

0 голосов
/ 17 марта 2020

Попробуйте это ... 

(function () {
  var $box = $('.acc-box');
  $box.each(function () {

    var $trigger = $('.acc-trigger', this);
    $trigger.first().addClass(':hidden').next().slideUp(300);

    $trigger.on('click', function () {
      var $this = $(this);
      if (!$this.hasClass('active')) {
        if ($this.data('mode') === 'toggle') {
          $this.toggleClass('active').next().stop(true, true).slideToggle(300);
        } else if ($this.next().is(':hidden')) {
          $trigger.removeClass('active').next().slideUp(300);
          $this.toggleClass('active').next().slideDown(300);
        }
      }
      return false;
    });
  });
}());

$('a').on('click', function(){
  if ($(this).parent().hasClass('active')) {
     $('.acc-container').each(function() {
       $(this).hide();
     });
  }
});
...