$ eventTarget.is（$（this））は動作しません

Question

サンプルアコーディオンを作成しました。タブがクリックされている場合、その兄弟は閉じているはずです。つまり、イベントターゲットが現在のタブ（タブは<header>）の場合は、1つのタブのみを開く必要があります。私がコードで行ったことは、イベントターゲットが現在のタブ（$(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

あなたはあなたのコードを修正し、単にクリックheaderに関連している​​要素を取得し、それにslideToggle()を呼び出すことによって、それをより簡潔にし、その後、残りのすべての​​にslideUp()を呼び出すことができます要素。これを試してみてください：

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