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-text"？

这种方法，我想它很接近，但它有一个奇怪的行为，有时有效，有时无效：

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

使用这个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)
       }    
  })  
})

JQuery slideToggle 一次只切换 1 个项目

JQuery slideToggle only 1 item at a time

jquery

slidetoggle