jquery - 簡單的手風琴

Question

我需要的是，如果tab會點擊，打開標簽應該關閉樣本在這里

$("#accordion > li > div").click(function () {
      $('.active').not(this).removeClass('active');

      $(this).toggleClass('active');
      if (false == $(this).next().is(':visible')) {
                  $('#accordion > ul').slideUp(300);
                }
                $(this).next().slideToggle(300);
              });

              var animationIsOff = $.fx.off;
              $.fx.off = true;
              $('#accordion > li > div:eq(0)').click()
              $.fx.off = animationIsOff;

Answer 1

改變這一行：

$('.active').not(this).removeClass('active');

至：

$('.active').not(this).removeClass('active').next().hide(300);

小提琴： http ： //jsfiddle.net/tyeKJ/10/

Answer 2

   <div class="container">
    <div class="accord1">
<ul>
  <li>
    <p>Accord 1</p>
    <div class="accord-content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
    </div>
  </li>
  <li>
    <p>Accord 2</p>
    <div class="accord-content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
    </div>
  </li>
  <li>
    <p>Accord 3</p>
    <div class="accord-content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
    </div>
  </li>

</ul>

  $('.accord1 li p').click(function(){
  $(this).next(".accord-content").slideToggle();
  $(this).closest("li").siblings().find('.accord-content').slideUp();
 });

http://codepen.io/catchmeatcodepen/pen/jbwBze

Answer 3

不要只刪除活動的類，還要滑動面板：

if ($('.active').not(this).length > 0) {
    $('.active').next().slideUp(300);
    $('.active').removeClass('active');
}

更新了小提琴 。

Answer 4

修復了你的腳本：

 $("#accordion > li > div").click(function () {
     $('#accordion').find('ul').not($(this).next()).slideUp(300);
     $('.active').not(this).removeClass('active');

     $(this).toggleClass('active');
     $(this).next().slideToggle(300);
 });

 var animationIsOff = $.fx.off;
 $.fx.off = true;
 $('#accordion > li > div:eq(0)').click()
 $.fx.off = animationIsOff;

在這里演示

Answer 5

  $(document).ready(function(e) { $(".demo div").hide(); $(".demo h3").click(function(){ $(this).next().slideToggle() .siblings("div:visible").slideUp(); }); }); 

 h3 { background-color:aqua; padding:10px; margin:3px; width:60%; } .demo div { color:#FFF; background-color:maroon; padding:25px; width:55%; margin-left:25px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="demo"> <h3>Html</h3> <div> This is a html tag. This is a html tag. </div> <h3>Css</h3> <div> This is a css tag. This is a css tag. </div> <h3>Javascript</h3> <div> This is a js tag. This is a js tag. </div> </div>