Question

我创建了一个带标题和正文的自定义面板。我已经设置了面向右侧面板的链接，该面板折叠并展开面板主体。当我第一次打开它时它不会崩溃。点击一次后，它工作正常。可能是我无法很好地表达我的问题，你可以查看我的代码。这是我的代码

码

body {
  padding: 30px;
}
.panel-default {
  border-color: #7e8685;
}
.panel {
  position: relative;
  margin-bottom: 16px;
  background-color: #fff;
  color: #313534;
  border: 0;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.panel-default>.panel-heading {
  color: #313534;
  background-color: #fff;
  border-color: #7e8685;
}
.panel>.panel-heading {
  position: relative;
  line-height: 60px;
  min-height: 64px;
  border: 0;
  border-top-right-radius: 2px;
  border-top-left-radius: 2px;
  padding: 20px 20px;
  vertical-align: middle;
  line-height: 17px;
  font-size: 20px;
  letter-spacing: -0.1px;
}
.panel .panel-body {
  padding: 24px 16px;
}
.panel .collapsed .fa.arrow:before {
  content: "\f104";
}
.panel .fa.arrow:before {
  content: "\f107";
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row">

  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        <a data-toggle="collapse" data-target="#demo" aria-expanded="true">
          <i class="fa arrow pull-right"></i>
        </a>
        Panel Heading
      </div>
      <div class="panel-body" id="demo">
        Panel Body
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/dofneh61

Answer 1

你需要改变一些类并在里面创建一个新的div。也许这对你有用：

<强> HTML：

<div class="row">
      <div class="col-md-6">
          <div class="panel panel-default">
              <div class="panel-heading">
                    <a data-toggle="collapse" data-target="#demo" aria-expanded="true"> <i class="fa arrow pull-right"></i> </a>
                    Panel Heading
                </div>
          <!-- Removed panel-body class. -->
          <!-- Added: .in .collapse .panel-collapse -->
        <div id="demo" class="panel-collapse collapse in">
          <!-- Created: new nested .padding div only to set your custom padding -->
          <div class="padding">
              Panel Body
         </div>
        </div>
       </div>
    </div>
    </div>

<强> CSS：仅限更改：

<强> 重命名

.panel .panel-body {
    padding: 24px 16px;
}

<强> 到：

.padding {
    padding: 24px 16px;
}

<强> Live Demo

Answer 2

您可以将panel-body div更改为：

<div class="panel-body collapse" aria-expanded="true" id="demo">
      Panel Body
</div>

Answer 3

将aria-expanded="false"设置为最初折叠正文。

面板体折叠错误

3 个答案: