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

Question

Я сделал образец аккордеона. Если щелкнуть вкладку, ее братья и сестры должны быть закрыты; другими словами, только одна вкладка должна быть открыта, если целью события является текущая вкладка (вкладки: <header> s). То, что я сделал в своем коде, - это тест, если целью события является текущая вкладка, которая равна $(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>