JQuery slideToggle 단 한 번에 한 항목 만

Question

이 섹션에서는 가능한 한 간단한 코드를 만들고 싶습니다.

 <div class="wrap"> 
    <div class="accordion-wrap"> 
     <div class="accordion-item"> <h3> Tab Title </h3> </div> 
     <p class="accordion-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac sem sem. Aenean nibh turpis, fermentum nec interdum sit amet, molestie a turpis. Cras imperdiet vestibulum purus eu bibendum. Sed vitae sem iaculis, lacinia massa eu, eleifend eros. Sed eget efficitur velit. Vestibulum vel lorem lacus. Nunc accumsan massa nec ipsum molestie tincidunt. Phasellus vehicula, lorem tempus fringilla posuere, sapien enim tristique quam, vitae feugiat eros ipsum sit amet metus. </p> 
    </div> 
    <div class="accordion-wrap"> 
     <div class="accordion-item"> <h3> Tab Title </h3> </div> 
     <p class="accordion-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac sem sem. Aenean nibh turpis, fermentum nec interdum sit amet, molestie a turpis. Cras imperdiet vestibulum purus eu bibendum. Sed vitae sem iaculis, lacinia massa eu, eleifend eros. Sed eget efficitur velit. Vestibulum vel lorem lacus. Nunc accumsan massa nec ipsum molestie tincidunt. Phasellus vehicula, lorem tempus fringilla posuere, sapien enim tristique quam, vitae feugiat eros ipsum sit amet metus. </p> 
    </div> 
    <div class="accordion-wrap"> 
     <div class="accordion-item"> <h3> Tab Title </h3> </div> 
     <p class="accordion-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac sem sem. Aenean nibh turpis, fermentum nec interdum sit amet, molestie a turpis. Cras imperdiet vestibulum purus eu bibendum. Sed vitae sem iaculis, lacinia massa eu, eleifend eros. Sed eget efficitur velit. Vestibulum vel lorem lacus. Nunc accumsan massa nec ipsum molestie tincidunt. Phasellus vehicula, lorem tempus fringilla posuere, sapien enim tristique quam, vitae feugiat eros ipsum sit amet metus. </p> 
    </div> 
    <div class="accordion-wrap"> 
     <div class="accordion-item"> <h3> Tab Title </h3> </div> 
     <p class="accordion-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac sem sem. Aenean nibh turpis, fermentum nec interdum sit amet, molestie a turpis. Cras imperdiet vestibulum purus eu bibendum. Sed vitae sem iaculis, lacinia massa eu, eleifend eros. Sed eget efficitur velit. Vestibulum vel lorem lacus. Nunc accumsan massa nec ipsum molestie tincidunt. Phasellus vehicula, lorem tempus fringilla posuere, sapien enim tristique quam, vitae feugiat eros ipsum sit amet metus. </p> 
    </div> 
    </div> 

JQ :이 같은 아코디언 메뉴 감안할 때

$(".accordion-wrap").on("click", function(){ 
    $(this).children().eq(1).slideToggle(400); 
}) 

가 어떻게 그것을 할 수 있도록 단지 1 "아코디언 텍스트"한 번에 볼 수있다?

$(".accordion-wrap").on("click", function(){ 
    $(this).children().eq(1).slideToggle(400); 
    $(this).siblings().children().eq(1).hide(); 
}) 

Answer 1

는이 업데이트 된 코드 jsfiddle.net/bharatsing/ectb5Lqa/1/

$(".accordion-wrap").on("click", function(){ 
    $(this).children().eq(1).slideToggle(400); 
    $(".accordion-wrap .accordion-text").not($(this).children().eq(1)).hide(); 
}) 

Answer 2

을 시도 할 수 있습니다 :

작품의 이런 종류의, 나는 가까이 있지만 가끔 그렇지 않은 때때로 작동, 이상한 행동을 가지고 가정 다음은 slideUp과 slideToggle 애니메이션의 가장 좋은 예입니다.

$(".accordion-wrap").on("click", function(){ 
 
    $(this).children('.accordion-text').slideToggle(); 
 
     
 
    $(this).siblings().children().next().slideUp(); 
 
    return false; 
 
})

.accordion-text{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <div class="accordion-wrap"> 
 
     <div class="accordion-item"> <h3> Tab Title </h3> </div> 
 
     <p class="accordion-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac sem sem. Aenean nibh turpis, fermentum nec interdum sit amet, molestie a turpis. Cras imperdiet vestibulum purus eu bibendum. Sed vitae sem iaculis, lacinia massa eu, eleifend eros. Sed eget efficitur velit. Vestibulum vel lorem lacus. Nunc accumsan massa nec ipsum molestie tincidunt. Phasellus vehicula, lorem tempus fringilla posuere, sapien enim tristique quam, vitae feugiat eros ipsum sit amet metus. </p> 
 
    </div> 
 
    <div class="accordion-wrap"> 
 
     <div class="accordion-item"> <h3> Tab Title </h3> </div> 
 
     <p class="accordion-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac sem sem. Aenean nibh turpis, fermentum nec interdum sit amet, molestie a turpis. Cras imperdiet vestibulum purus eu bibendum. Sed vitae sem iaculis, lacinia massa eu, eleifend eros. Sed eget efficitur velit. Vestibulum vel lorem lacus. Nunc accumsan massa nec ipsum molestie tincidunt. Phasellus vehicula, lorem tempus fringilla posuere, sapien enim tristique quam, vitae feugiat eros ipsum sit amet metus. </p> 
 
    </div> 
 
    <div class="accordion-wrap"> 
 
     <div class="accordion-item"> <h3> Tab Title </h3> </div> 
 
     <p class="accordion-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac sem sem. Aenean nibh turpis, fermentum nec interdum sit amet, molestie a turpis. Cras imperdiet vestibulum purus eu bibendum. Sed vitae sem iaculis, lacinia massa eu, eleifend eros. Sed eget efficitur velit. Vestibulum vel lorem lacus. Nunc accumsan massa nec ipsum molestie tincidunt. Phasellus vehicula, lorem tempus fringilla posuere, sapien enim tristique quam, vitae feugiat eros ipsum sit amet metus. </p> 
 
    </div> 
 
    <div class="accordion-wrap"> 
 
     <div class="accordion-item"> <h3> Tab Title </h3> </div> 
 
     <p class="accordion-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac sem sem. Aenean nibh turpis, fermentum nec interdum sit amet, molestie a turpis. Cras imperdiet vestibulum purus eu bibendum. Sed vitae sem iaculis, lacinia massa eu, eleifend eros. Sed eget efficitur velit. Vestibulum vel lorem lacus. Nunc accumsan massa nec ipsum molestie tincidunt. Phasellus vehicula, lorem tempus fringilla posuere, sapien enim tristique quam, vitae feugiat eros ipsum sit amet metus. </p> 
 
    </div> 
 
    </div>

당신은 내 위의 코드를 확인시겠습니까?

Answer 3

사용

.accordion-text{ 
    display:none; 
} 

이이

$(document).ready(function(){ 
    $(".accordion-item").click(function(){ 
    $(".accordion-text").slideUp(400); 
    if(!$(this).next().is(":visible")){ 
     $(this).next().slideToggle(400) 
     }  
    }) 
})