0

必要なのは、タブがクリックされたら、タブを開いてサンプルを閉じる必要があるということです。 

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

6 に答える 6

2

この行を変更します。

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

に：

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

フィドル： http： //jsfiddle.net/tyeKJ/10/

于 2013-01-09T07:07:49.380 に答える
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

于 2016-04-12T21:21:06.777 に答える
1 

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

于 2017-09-19T16:31:52.753 に答える
0

アクティブのクラスを削除するだけでなく、パネルをスライドアップします。

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

フィドルを更新しました。

于 2013-01-09T07:08:45.283 に答える
0

スクリプトを修正しました：

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

こちらのデモ

于 2013-01-09T07:10:33.897 に答える
0

#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にアクセスしてください。

于 2021-08-07T09:09:09.853 に答える