在 Bootstrap 中默认关闭手风琴 [英] Make accordion closed by default in Bootstrap

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

问题描述

我正在使用 Bootstrap 手风琴.我希望所有面板默认关闭，但我的面板开始展开.

这是我的代码:

<c:forEach items="${proposals}" var="proposal" varStatus="serial"><div class="panel panel-default"><div class="panel-heading" role="tab" id="heading${proposal.propID}" ><h4 class="panel-title"><span class="fa fa-paperclip" aria-hidden="true"></span><a class="accordion-toggle 折叠"data-toggle="collapse" data-parent="#accordion"href="#collapse${proposal.propID}" aria-expanded="false"aria-controls="collapse${proposal.propID}">${proposal.title}</a>
<div id="collapse${proposal.propID}" class="panel-collapse 折叠在"role="tabpanel" aria-labelledby="heading${proposal.propID}">${proposal.interest}

</c:forEach>

我也使用了 aria-expanded="false"，但它不起作用.

怎么了?

解决方案

这行似乎是罪魁祸首:

<div id="collapse${proposal.propID}" class="panel-collapse collapse in" ...

如果你去掉了类中的 in，它应该可以按照你的结构工作.看一下这个例子，看看两个面板的区别:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="样式表"/><script src="//code.jquery.com/jquery-1.11.0.min.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script><div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><div class="panel panel-default"><div class="panel-heading" role="tab" id="headingOne"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">此面板默认打开</a>

<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"><div class="panel-body">打开

<div class="panel panel-default"><div class="panel-heading" role="tab" id="headingTwo"><h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">此面板默认关闭</a>

<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"><div class="panel-body">关闭

请注意，第一个面板的 标签上没有 class=collapsed，并且有 in 类它是

标签，并开始 OPEN.第二个面板切换这些，然后开始关闭.

编辑

无法制作 Bootply，不断收到应用程序错误".

I'm using Bootstrap Accordion. I want all the panel closed by default, but my panels are start expanded.

Here's my code: 

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">
    <c:forEach items="${proposals}" var="proposal" varStatus="serial">
        <div class="panel panel-default">

            <div class="panel-heading" role="tab" id="heading${proposal.propID}"  >
                <h4 class="panel-title">
                    <span class="fa fa-paperclip" aria-hidden="true"></span>
                    <a class="accordion-toggle collapsed" 
                       data-toggle="collapse" data-parent="#accordion"
                       href="#collapse${proposal.propID}" aria-expanded="false"
                       aria-controls="collapse${proposal.propID}"> 
                           ${proposal.title} 
                    </a>
                </h4>
            </div>

            <div id="collapse${proposal.propID}" class="panel-collapse collapse in"
                 role="tabpanel" aria-labelledby="heading${proposal.propID}">
                ${proposal.interest}
            </div>

        </div>
    </c:forEach> 
</div>

I also used aria-expanded="false", but it doesn't work.

What's the mistake?

解决方案

This line here seems to be the culprit:

<div id="collapse${proposal.propID}" class="panel-collapse collapse in" ...

If you get rid of in in the class, it should work as you have it structured. Take a look at this example to see the difference between the two panels:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          This Panel is Open By Default
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Open
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          This Panel Is Closed By Default
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Closed
      </div>
    </div>
  </div>
</div>

Notice the first panel doesn't have the class=collapsed on it's <a> tag, and has the in class on it's <div> tag, and starts OPEN. The second panel switches those, and starts CLOSED.

EDIT

Can't make a Bootply, keep getting "Application Error".

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

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