Bootstrap折叠面板默认关闭

时间：2015-07-24 10:35:20

标签： twitter-bootstrap twitter-bootstrap-3

我使用了一个自举面板，我添加了一个跨度可点击图标：当面板主体打开时加上当面板主体关闭时减去，我现在的问题是如何将其设置为默认关闭（加上默认显示的图标）当我点击它时，面板主体将会打开）

在我的代码上方，请提前感谢您的帮助。

<html>

<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).on('click', '.panel-heading span.clickable', function (e) {
    var $this = $(this);
    if (!$this.hasClass('panel-collapsed')) {

        $this.parents('.panel').find('.panel-body').slideUp();
        $this.addClass('panel-collapsed');
        $this.find('i').removeClass('glyphicon-minus').addClass('glyphicon-plus');
    } else {
    console.log($this);

        $this.parents('.panel').find('.panel-body').slideDown();
        $this.removeClass('panel-collapsed');
        $this.find('i').removeClass('glyphicon-plus').addClass('glyphicon-minus');
    }
});
</script>
<style>

.clickable
{
    cursor: pointer;
}

.clickable .glyphicon
{
    background: rgba(0, 0, 0, 0.15);
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px
}

.panel-heading span
{
    margin-top: -23px;
    font-size: 15px;
    margin-right: -9px;
}
</style>
</head>
 <body>
 <div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel 1</h3>
                    <span class="pull-right clickable panel-collapsed in"><i class="glyphicon glyphicon-plus"></i></span>
                </div>
                <div class="panel-body">
                    Panel content</div>
            </div>
        </div>

        </div>
    </div>
 </body>

</html>

4 个答案:

答案 0 :(得分：4)

您可以使用已经拥有您需要的大部分逻辑的Bootstrap collapse组件：

<div class="panel-heading">
   <h3 class="panel-title">Panel 1</h3>
   <button class="btn btn-primary pull-right" type="button"
           data-toggle="collapse" data-target="#collapseExample">
      <i class="glyphicon glyphicon-plus"></i>
    </button>
</div>
<div class="collapse" id="collapseExample">
    <div class="panel-body">Panel content</div>
</div>

此外，您只需要一个小的JavaScript来更改按钮图标：

    $(document).on('click', '.panel-heading button', function(e) {
      var $this = $(this);
      var icon = $this.find('i');
      if (icon.hasClass('glyphicon-plus')) {
        $this.find('i').removeClass('glyphicon-plus').addClass('glyphicon-minus');
      } else {
        $this.find('i').removeClass('glyphicon-minus').addClass('glyphicon-plus');
      }
    });

工作示例：

＆＃13;
＆＃13; 
<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script>
    $(document).on('click', '.panel-heading button', function(e) {
      var $this = $(this);
      var icon = $this.find('i');
      if (icon.hasClass('glyphicon-plus')) {
        $this.find('i').removeClass('glyphicon-plus').addClass('glyphicon-minus');
      } else {
        $this.find('i').removeClass('glyphicon-minus').addClass('glyphicon-plus');
      }
    });
  </script>
  <style>
    .clickable {
      cursor: pointer;
    }
    .clickable .glyphicon {
      background: rgba(0, 0, 0, 0.15);
      display: inline-block;
      padding: 6px 12px;
      border-radius: 4px
    }
    .panel-heading span {
      margin-top: -23px;
      font-size: 15px;
      margin-right: -9px;
    }
    .panel-heading button  {
      margin-top: -25px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">
                        Panel 1</h3>
            <button class="btn btn-primary pull-right" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
              <i class="glyphicon glyphicon-plus"></i>
            </button>
          </div>
          <div class="collapse" id="collapseExample">
            <div class="panel-body">
              Panel content</div>
          </div>
        </div>

      </div>

    </div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：3)

你只需要改变这个：

<div class="panel-body">

对此：

<div class="panel-body"  style="display:none;">

并通过slideDown（）更改slideUp（），并通过slideUp（）更改slideDown（）。

同样改变这个：

<span class="pull-right clickable collapse in"><i class="glyphicon glyphicon-plus"></i></span>

对此：

<span class="pull-right clickable collapse in"><i class="glyphicon glyphicon-minus"></i></span>

现在你问题中提到的一切都应该有效。

这是一个JSFiddle链接：Try It

答案 2 :(得分：1)

删除div的班级展示

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">

到

<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">

答案 3 :(得分：0)

我正在为你分享一个参考代码，只需按照代码，不需要任何点击功能，bootstrap'data-toggle =“collapse”'自动处理它。

CODE：

            <div class="panel-group" id="steps">
                <!-- Step 1 -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#steps" href="#stepOne"><SPAN TAG></a>
                        </h4>
                    </div>
                    <div id="stepOne" class="panel-collapse collapse">
                        <div class="panel-body">
                            <div class="form-group">
                                <label class="col-lg-2 control-label">Sub-Category Name</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

只需将span标记放在其中并使用class pull-right，您需要的引导图标http://getbootstrap.com/components/

我希望这会奏效。

相关问题
最新问题