獲取距離最近的類fadeIn在點擊和同級到fadeOut

Question

我想使菜單切換顯示不同的信息片段，但是我的嘗試不工作。

我在找什麼是如果用戶點擊任何標題（A，B或C）的描述將fadeIn。這就是爲什麼我試圖使用closest()方法來獲得與標題相關的描述。然後，當用戶點擊不同的標題時，當前一個關閉，另一個打開。

有沒有人看到我做錯了什麼？

$(".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

與您的代碼的問題是，你使用closest()，它尋找父元素，而不是next()或siblings() w它搜索同一級別的元素。

但是，通過將事件處理程序附加到.service-list元素並使用find()獲取所需的元素爲fadeToggle()，可以使邏輯更加簡單。然後，您可以選擇所有其他.service-list-description元素並撥打​​來隱藏它們。試試這個：

$(".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

下面的函數應該做你要求什麼：

$(".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 
}); 

小提琴：https://jsfiddle.net/beekvang/oro9ue3k/