$eventTarget.is($(this)) не работает

Question

Я сделал образец аккордеона. Если щелкнуть вкладку, предполагается, что ее братья и сестры закрываются; другими словами, только одна вкладка должна быть открыта, если целью события является текущая вкладка (вкладки являются <header> с). В моем коде я проверил, является ли цель события текущей вкладкой, $(this), но это не сработало, ничего не изменилось. Как я могу это исправить?

var $header = $('#accordions').find('header');

$header.on('click', function(e) {
  var $eventTarget = $(e.target);

  if (!$eventTarget.is($(this))) {
    $(this).siblings('.slide').slideUp(300);
  } else {
    $(this).siblings('.slide').slideToggle(300);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="accordions">
  <div class="accordion">
    <header>Slide 1</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="accordion">
    <header>Slide 2</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="accordion">
    <header>Slide 3</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="accordion">
    <header>Slide 4</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</section>

Answer 1

Вы можете исправить свой код и сделать его более кратким, просто получив .slide элемент, связанный с нажатием header и звонит slideToggle() на это, то звоню slideUp() на всех остальных .slide элементы. Попробуй это:

$('#accordions header').on('click', function(e) {
  var $target = $(this).next('.slide').slideToggle(300);
  $('.slide').not($target).slideUp(300);
});

header { font-weight: bold; }
.slide { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="accordions">
  <div class="accordion">
    <header>Slide 1</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="accordion">
    <header>Slide 2</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="accordion">
    <header>Slide 3</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="accordion">
    <header>Slide 4</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</section>