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/

＆＃13;

＆＃13;

s3.upload({
    Bucket: myBucket,
    Key:  'myPath/' + thing.id + '.json',
    Body: JSON.stringify(thing),
    ContentType: 'application/json;charset=utf-8'
})

＆＃13;

ContentEncoding: 'utf-8'

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;