Jquery 手风琴默认不折叠 [英] Jquery accordion not collapse by default

查看：33
本文介绍了Jquery 手风琴默认不折叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 bootstrap 提供的折叠插件这是一个jquery简单插件

但是它默认折叠，如何修改使折叠项目默认隐藏，只有当我按下标题时，项目才会折叠并显示?谢谢

插件文档，只有几行所以只需要一分钟

$(document).ready( function () {$(".collapse").collapse()({切换:假，显示:假});});

这是html:

<div class="alert alert-info" data-toggle="collapse" href="#collapse1" style="margin-bottom:0px;">可折叠 #1
<div id="collapse1" class="accordion-body collapse" style="background-color:#ffffff;">内容 1

<div class="alert alert-info" data-toggle="collapse" href="#collapse2" style="margin-bottom:0px;">可折叠 #2

<div id="collapse2" class="accordion-body collapse" style="background-color:#ffffff;">内容2

解决方案

对于 Bootstrap 3，有些事情发生了变化.以下代码在 Bootstrap 3 中实现了您想要的功能

如果您希望面板主体默认显示:

如果您希望面板主体默认隐藏:

这是一个例子:

<div class="panel-group" id="accordion"><!- 重复下一个面板-------><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">xxxxxxxxxxx这里是标题内容xxxxxxxxxxxx</a>
<div id="collapseOne" class="panel-collapse 折叠在"><div class="panel-body">xxxxxxxxxxx这里是正文内容xxxxxxxxxxxx

<!- 重复下一个面板---(但更改 <div id="collapseTwo")--->

I am using collapse plugin provided by bootstrap which is a jquery simple plugin

However it collapse by default, how to modify so that the collapse item is hidden by default, only when i press the header, then the item collapse and show? Thank you

The document of the plugin, just few line so it only takes one minute

$(document).ready( function () {
$(".collapse").collapse()({
  toggle: false,
  show: false
  });
} );

This is the html: 

<div class="accordion-group">
            <div class="alert alert-info" data-toggle="collapse" href="#collapse1" style="margin-bottom:0px;">                     
              Collapsible #1
                  </div>   
          <div id="collapse1" class="accordion-body collapse" style="background-color:#ffffff;">
               content1
           </div>
                           <div class="alert alert-info" data-toggle="collapse" href="#collapse2" style="margin-bottom:0px;">                     
              Collapsible #2
                  </div>   
          <div id="collapse2" class="accordion-body collapse" style="background-color:#ffffff;">
               content2
           </div>

解决方案

For Bootstrap 3, some things have changed. The following code accomplishes your desired functionality in Bootstrap 3

If you want the panel body to show by default:

<div id="collapseOne" class="panel-collapse collapse in">

If you want the panel body to hide by default:

<div id="collapseOne" class="panel-collapse collapse">

Here is an example:

<div class="bs-example">
    <div class="panel-group" id="accordion">

          <!- Repeat For Next Panel------->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                       xxxxxxxxxxxHERE IS THE HEADER CONTENTSxxxxxxxxxxxx
                    </a>
                </h4>
           </div>
               <div id="collapseOne" class="panel-collapse collapse in">
                   <div class="panel-body">
                       xxxxxxxxxxxHERE IS THE BODY CONTENTSxxxxxxxxxxxx
                   </div>
               </div> 
         </div>
            <!- Repeat For Next Panel---(but change <div id="collapseTwo")--->

     </div>
 </div>

这篇关于Jquery 手风琴默认不折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆