jquery - 简单的手风琴

Question

我需要的是，如果标签会点击，打开标签应该关闭样本是here

$("#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

	$(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>

Answer 4

不要只删除活动的类，还要向上滑动面板：

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

更新fiddle。

Answer 5

修正了你的脚本：

 $("#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;

演示here

Answer 6

#CSS：

.my-accordion .menu {
    background-color: #d5d5d5;
    color: #444;
    cursor: pointer;
    padding: 12px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    margin-top: 4px;
    border-radius: 8px;
    font-size: inherit
}

.my-accordion .panel {
    background-color: #FFFFFF;
    color: #000000;
    overflow: hidden
}

.my-accordion .open {
    display: block
}

.my-accordion .close {
    display: none
}

.my-accordion .active {
    background-color: #1b90bb;
    color: #fff
}

.my-accordion .arrow {
    float: right;
    display: block
}

.my-accordion .darrow {
    display: none
}

.my-accordion .active .darrow {
    display: block
}

.my-accordion .active .rarrow {
    display: none
}

.my-accordion .panel a {
    display: block;
    background: #808080;
    color: #FFFFFF;
    padding: 5px;
    margin: 3px;
    width: 100%;
    text-decoration: none
}

#HTML:

<div class="my-accordion">
   <button class='menu'>Menu 1<span class='arrow rarrow'>+</span><span class='arrow darrow'>-</span></button>
   <div class='panel close'>
      <div><a href="">Link 1</a><a href="">Link 2</a><a href="">Link 3</a><a href="">Link 4</a></div>
   </div>
   <button class='menu'>Menu 2<span class='arrow rarrow'>+</span><span class='arrow darrow'>-</span></button>
   <div class='panel close'>
      <div><a href="">Link 1</a><a href="">Link 2</a><a href="">Link 3</a><a href="">Link 4</a></div>
   </div>
   <button class='menu'>Menu 3<span class='arrow rarrow'>+</span><span class='arrow darrow'>-</span></button>
   <div class='panel close'>
      <div style="padding:10px">Data will be added soon.</div>
   </div>
</div>

#JAVASCRIPT：

! function() {
    for (var l = document.querySelectorAll(".my-accordion .menu"), e = 0; e < l.length; e++) l[e].addEventListener("click", n);

    function n() {
        for (var e = document.querySelectorAll(".my-accordion .panel"), n = 0; n < e.length; n++) e[n].className = "panel close";
        if (-1 == this.className.indexOf("active")) {
            for (n = 0; n < l.length; n++) l[n].className = "menu";
            this.className = "menu active", this.nextElementSibling.className = "panel open"
        } else
            for (n = 0; n < l.length; n++) l[n].className = "menu"
    }
}();

它是带有 javascript 的 html 手风琴代码。 修改样式访问https://www.htmlcodegenerator-tools.com/2020/08/html-accordion-generator.html