获取距离最近的类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/