Die nächste Klasse zu FadeIn auf klicken und Geschwister zu FadeOut

Question

Ich versuche, ein toggle wie Menü zum Anzeigen verschiedener Informationen, aber mein Versuch funktioniert nicht.

Was ich suche ist, wenn der Benutzer auf einen der Titel (A, B oder C) klickt, wird die Beschreibung fadeIn. Deshalb habe ich versucht, die closest() Methode zu verwenden, um die mit dem Titel verbundene Beschreibung zu erhalten. Wenn der Benutzer dann auf einen anderen Titel klickt, wird der aktuelle geschlossen und der andere geöffnet.

Kann jemand sehen, was ich falsch mache?

$(".service-list-title").on("click", function(event) { 
 
    $(this).closest('.service-list-description').fadeIn(300).siblings().closest('.service-list-description').fadeOut(300); 
 
});

.service-list-title { 
 
    display: block; 
 
    color: #333333; 
 
    font-size: 1.1rem; 
 
    letter-spacing: .1rem; 
 
    margin: 20px 0px; 
 
    padding: 0 10px 0 25px; 
 
    cursor: pointer; 
 
    transition: all .35s ease; 
 
    -webkit-transition: all .35s ease; 
 
} 
 

 
.service-list-description { 
 
    display: none; 
 
    color: #333333; 
 
    font-size: .9rem; 
 
    margin: 10px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="service-list"> 
 
    <li class="service-list-title">A</li> 
 
    <p class="service-list-description">This is the content for A</p> 
 
</div> 
 
<div class="service-list"> 
 
    <li class="service-list-title">B</li> 
 
    <p class="service-list-description">This is the content for B</p> 
 
</div> 
 
<div class="service-list"> 
 
    <li class="service-list-title">C</li> 
 
    <p class="service-list-description">This is the content for C</p> 
 
</div>

Answer 1

Das Problem mit Ihrem Code ist, dass Sie closest() verwenden, welches nach Elternelementen sucht, anstelle von next() oder siblings() w hich sucht nach Elementen auf der gleichen Ebene.

Jedoch Sie die Logik viel einfacher durch Anbringen der Event-Handler und find()-fadeToggle() das gewünschte Element zu erhalten unter Verwendung von zum .service-list Elemente machen. Sie können dann alle anderen .service-list-description Elemente auswählen und fadeOut() aufrufen, um sie zu verbergen. Versuchen Sie folgendes:

$(".service-list").on("click", function(event) { 
 
    var $target = $(this).find('.service-list-description').fadeToggle(300); 
 
    $('.service-list-description').not($target).fadeOut(300); 
 
});

.service-list-title { 
 
    display: block; 
 
    color: #333333; 
 
    font-size: 1.1rem; 
 
    letter-spacing: .1rem; 
 
    margin: 20px 0px; 
 
    padding: 0 10px 0 25px; 
 
    cursor: pointer; 
 
    transition: all .35s ease; 
 
    -webkit-transition: all .35s ease; 
 
} 
 

 
.service-list-description { 
 
    display: none; 
 
    color: #333333; 
 
    font-size: .9rem; 
 
    margin: 10px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="service-list"> 
 
    <li class="service-list-title">A</li> 
 
    <p class="service-list-description">This is the content for A</p> 
 
</div> 
 
<div class="service-list"> 
 
    <li class="service-list-title">B</li> 
 
    <p class="service-list-description">This is the content for B</p> 
 
</div> 
 
<div class="service-list"> 
 
    <li class="service-list-title">C</li> 
 
    <p class="service-list-description">This is the content for C</p> 
 
</div>

Answer 2

Die Funktion sollte unten tun, was Sie fragen nach:

$(".service-list-title").on("click", function(event) { 
    $('.service-list-description').fadeOut(300); // Close any that's open 
    $(this).siblings('.service-list-description').fadeIn(300); // Open new 
}); 

Fiddle: https://jsfiddle.net/beekvang/oro9ue3k/