fadeOutに最も近いクラスをfadeInに取得する

Question

さまざまな情報を表示するためのメニューのようにトグルを作ろうとしていますが、試行はできません。

私が探しているのは、ユーザがタイトル（A、B、C）のいずれかをクリックすると、説明がfadeInになります。だから私はclosest()メソッドを使ってタイトルに関連する説明を取得しようとしたのです。次に、ユーザーが別のタイトルをクリックすると、現在のタイトルが閉じられ、もう1つは開いた状態になります。

誰かが私が間違っているのを見ていますか？

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