Jquery 手风琴答案

【问题标题】：Jquery AccordionsJquery 手风琴
【发布时间】：2017-08-31 02:59:44
【问题描述】：

我正在使用以下功能来展示我的手风琴

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

所以第一个手风琴在页面加载时打开，然后当我单击任何其他手风琴时，一个已经打开的手风琴保持打开状态，另一个手风琴也打开，前一个手风琴仅在我单击它时关闭。我想要实现的是在单击下一个手风琴时关闭前一个手风琴。任何人都可以帮助我重组该功能。非常感谢

【问题讨论】：

stackoverflow.com/questions/5081919/… 正如这个答案所说（以及官方文档docs.jquery.com/UI/Accordion）......如果您想同时打开多个部分，则不应使用手风琴。
嗨 James 感谢您的及时回复，我想我的描述不够清楚。我不想同时打开多个部分，但我的代码会这样做，我想修改它的方式，这样它一次只会打开一个部分，这有意义吗？
如果您一次只希望打开一个部分，为什么还要有多个手风琴？
这是我正在使用的代码testtwo.fsdegrees.com/accordions.html
您似乎没有使用 jquery ui 手风琴插件。有什么理由吗？ jsfiddle.net/6jbuX 用于 UI.Accordion 插件示例

标签： jquery jquery-plugins accordion jquery-ui-accordion

【解决方案1】：

在这个视频中 - http://tutsplus.com/lesson/events-201/ Jeffrey Way 正在创建一个简单的手风琴，我想它会对你有所帮助。

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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

【讨论】：

【解决方案5】：

一个非常简单的手风琴（没有手风琴容器）：

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

$(".acc-content").hide();
$(".acc-toggler").on("click",function(e){
	var accContent = $(this).next(".acc-content");
  
	$(".acc-content").not(accContent).slideUp();
	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>

【讨论】：