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

코드에 문제가 있는지, next() 또는 siblings() 대신 부모 요소를 찾습니다. hich는 동일한 레벨에서 요소를 검색합니다.

그러나 이벤트 처리기를 .service-list 요소에 연결하고 find()을 사용하여 fadeToggle()으로 필요한 요소를 가져 와서 논리를 훨씬 간단하게 만들 수 있습니다. 그런 다음 다른 모든 .service-list-description 요소를 선택하고 fadeOut()을 호출하여 요소를 숨길 수 있습니다. 이 시도 :

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

바이올린은 : 당신이 closest()을 사용하고 https://jsfiddle.net/beekvang/oro9ue3k/