JQuery slideToggle一次只能切换1个项目

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>

请检查一下我上面的sn-p好吗？

Answer 3

使用这个 css

.accordion-text{
  display:none;
}

还有这个js

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