【问题标题】:How i can show this collasible panel close by default? [closed]我怎样才能默认关闭这个可折叠面板? [关闭]
【发布时间】:2016-04-29 09:26:39
【问题描述】:

我正在尝试按照此处的示例进行操作

http://www.prepbootstrap.com/bootstrap-template/collapsepanels

如何默认显示面板关闭?

【问题讨论】:

  • 你试过了吗?
  • 是的,我尝试修改 javascript,但我不明白如何...

标签: javascript html twitter-bootstrap twitter-bootstrap-3 dom-events


【解决方案1】:

你必须像这样创建你的面板:

<div class="panel panel-default ">
                <div class="panel-heading ">
                    <h3 class="panel-title">Panel 1</h3>
                    <span class="pull-right clickable panel-collapsed"><i class="glyphicon glyphicon-chevron-down"></i></span>
                </div>
                <div class="panel-body collapse" style="display: none;">
                    Founded in 1892 and headquartered in Fairfield, CT, LexisNexis Corporate Affiliations 
                    is a technology and financial services company. 
                    The company offers products and services ranging from aircraft engines, power generation, 
                    water processing, and household appliances, among others. 
                    It operates in business segments including Energy Infrastructure, Aviation, Healthcare, 
                    Transportation, Home &amp; Business Solutions, and GE Capital. 
                    The company also provides medical imaging, business and consumer financing, 
                    and industrial products. 
                    It has presence in North America, Europe, Asia, South America, and Africa. 
                    According to the company's current 10K government filing it had FYE 12/31/2011 revenue of 
                    $147.3 billion and has 301,000 employees.
                </div>
            </div>

【讨论】:

  • 好的,我明白这一点,但我不能以任何方式修改默认关闭面板?
  • 抱歉误读示例中的代码。查看更新的帖子
【解决方案2】:

您可以使用 jQuery 来执行此操作。使用 onclick 处理程序来上滑或下滑面板主体。

这是我的小提琴[可点击面板][1]

  [1]: https://jsfiddle.net/q8L292sk/

【讨论】:

  • @junkfood 看看这个小提琴
猜你喜欢
  • 2021-05-11
  • 2023-03-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多