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>