$ eventTarget.is ($ (this)) funktioniert nicht

Question

Ich habe eine Probe Akkordeon gemacht. Wenn auf einen Tab geklickt wird, sollen seine Geschwister schließen; Mit anderen Worten, es muss nur eine Registerkarte geöffnet werden, wenn das Ereignisziel die aktuelle Registerkarte ist (die Registerkarten sind die <header> s). Was ich in meinem Code getan habe, ist zu testen, ob das Ereignisziel der aktuelle Tab ist, der $(this) ist, aber es hat nicht funktioniert, nichts hat sich geändert. Wie kann ich das beheben?

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

Sie können den Code beheben und machen es prägnanter durch einfaches Abrufen des .slide Element, das auf den geklickt header verwandt ist und slideToggle() und forderte sie auf, dann slideUp() Aufruf an alle .slide verbleibenden Elemente. Versuchen Sie folgendes:

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