jQuery的手風琴

Question

我用下面的函數來顯示我的手風琴

<script type="text/javascript"> 
$(document).ready(function(){ 

    $(".accordion h3:first").addClass("active"); 
    $(".accordion div:not(:first)").hide(); 

    $(".accordion h3").click(function(){ 
     $(this).next("div").slideToggle("fast") 
     .siblings("div:visible").slideDown("fast"); 
     $(this).toggleClass("active"); 
     $(this).siblings("h3").removeClass("active"); 
    }); 

}); 
</script> 

所以第一手風琴是在頁面加載打開，然後當我點擊任何其他手風琴其中一個已經打開保持打開，另一個打開此外，前一個只有當我點擊它時纔會關閉。我想要實現的是在點擊下一個手風琴時關閉以前的手風琴。任何人都可以幫助我重建這個功能。 非常感謝

Answer 1

在這段視頻 - http://tutsplus.com/lesson/events-201/ Jeffrey Way正在創建一個簡單的手風琴，我想它可以對你有所幫助。

Answer 2

<script type="text/javascript> 
$(".accordion h3").click(function(){ 
    $('.accordion h3').each(function() { 
     $(this).next("div").slideUp('slow'); 
    } 
    $(this).next("div").slideToggle("fast") 
    .siblings("div:visible").slideDown("fast"); 
    $(this).toggleClass("active"); 
    $(this).siblings("h3").removeClass("active"); 
}); 
</script> 

Answer 3

<div class="accordion"> 
<h3 class="accordion-title">Title</h3> 
<div class="accordion-content">text</div> 
</div> 

<script type="text/javascript"> 
jQuery(document).ready(function($){ 
     $('.accordion-title').click(function(){ 
     $(this).parent().children('.accordion-content').slideToggle(); 
     $(this).toggleClass('open'); 
     }); 
}); </script> 

Answer 4

$(".title_div").click(function(){ 
 
     $('.content_div').slideUp(); 
 
     if($(this).next().is(":visible")){ 
 
      $(this).next().slideUp();  
 
     }else{ 
 
      $(this).next().slideDown(); 
 
     } 
 
    });

.title_div{ display:block; padding:10px 20px; border:1px solid #ddd;} 
 

 
.content_div{ display:none; padding:20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<div class="box">  
 
    <div class="title_div"> 
 
    title 
 
    </div> 
 
    <div class="content_div"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since th 
 
    </div> 
 
    <div class="title_div"> 
 
    title 
 
    </div> 
 
    <div class="content_div"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since th 
 
    </div> 
 
    <div class="title_div"> 
 
    title 
 
    </div> 
 
    <div class="content_div"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since th 
 
    </div> 
 
</div>

Demo here

Answer 5

一個非常簡單的手風琴（無手風琴容器）：

https://jsfiddle.net/iocron/mu4jg67n/3/

$(".acc-content").hide(); 
 
$(".acc-toggler").on("click",function(e){ 
 
\t var accContent = $(this).next(".acc-content"); 
 
    
 
\t $(".acc-content").not(accContent).slideUp(); 
 
\t accContent.slideToggle(); 
 
});

body,* { margin:0; padding:0; } 
 
body { line-height:1; } 
 

 
.acc-toggler { padding:10px 12px; border-bottom:1px solid #ccc; background:#ddd; cursor:pointer; } 
 
.acc-content { padding:10px 12px; background:#eee; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <h3 class="acc-toggler">Accordion 1</h3> 
 
    <div class="acc-content">Text Content 1</div> 
 
    <h3 class="acc-toggler">Accordion 2</h3> 
 
    <div class="acc-content">Text Content 2</div> 
 
    <h3 class="acc-toggler">Accordion 3</h3> 
 
    <div class="acc-content">Text Content 3</div> 
 
</div>