Bootstrap手风琴带来了弊端问题

时间：2017-04-11 06:13:28

标签： html css3 twitter-bootstrap-3

我不明白为什么在面板标题上显示所有-而不是+

点击面板后，它会将所有-转换为+。

但这不是我第一次加载页面。

CSS ：

.panel-heading a:after {
    font-family: 'Glyphicons Halflings';
    content: "\2212"; /* Plus */
    float: right;
    color: #ebebeb;
    background-color:#fff;
    padding:12px;
    font-size:12px;
    border-radius:6px;
}

.panel-heading a.collapsed:after {
    content: "\2b";
}

完整代码： Jsfiddle

我做错了什么？

2 个答案:

答案 0 :(得分：1)

在页面加载过程中，手风琴出现时带有打开（或减去）符号，因为它需要collapsed中的引导类a具有此属性的标记 - ＆gt; data-toggle="collapse"。您的代码中遗漏了collapsed课程。

所以它看起来像：

<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                          Agronomija</a>

Demo

答案 1 :(得分：0)

您需要将collapsed课程添加到a所有data-toggle="collapse"代码中。因为，在运行时，当用户点击collapse组件时，Bootstrap会在collapsed位于所述位置附加DOM课程。

＆＃13;
＆＃13; 
.agronomija {
  background-image: url(./image/agronomija.png) !important;
  background-position: 101% 60%;
  !important;
  background-repeat: no-repeat !important;
}

.zemes-ukio {
  background-image: url(./image/zemes-ukio.png) !important;
  background-position: 101% 60%;
  !important;
  background-repeat: no-repeat !important;
}

.maisto-kokybe {
  background-image: url(./image/maisto-tec.png) !important;
  background-position: 101% 60%;
  !important;
  background-repeat: no-repeat !important;
}

.avatar img {
  border-radius: 13px;
  margin-left: 14px;
}

.avatar {
  padding-left: 0px !important;
  width: 11% !important;
}

.panel-footer p {
  display: inline-block;
  margin-top: 24px;
}

.panel-body {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  padding: 15px 0 15px 0 !important;
  line-height: 2;
  text-align: justify;
}

.fb-icon {
  background-image: url('./image/fb-icon.png') !important;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
}

.first-row {
  width: 50%;
}

.panel-footeris {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid #ebebeb;
  padding: 15px 0 15px 0;
}

.panel-footer-text {
  margin-top: 20px;
}

.panel-text {
  font-size: 18px;
}

.fb-area a {
  vertical-align: top;
  margin-left: 10px;
  font-size: 20px;
}

.pasimatuok {
  margin: 5% 0 0px 18%;
  padding: 12px !important;
  background-color: #f8983a !important;
  text-transform: uppercase;
  color: #fff;
  border-top: 5px solid #f47834 !important;
}

.pasimatuok:hover {
  color: #fff !important;
}

.registruokis:before {
  content: '';
  background-image: url('./image/forma-1.png');
  background-repeat: no-repeat;
  width: 34px;
  height: 34px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #f47e35;
  border-radius: 31px;
  padding: 30px;
  background-position: center;
}

.pasimatuok-header:before {
  content: '';
  background-image: url('./image/forma-2.png');
  background-repeat: no-repeat;
  width: 34px;
  height: 34px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #4ca366;
  border-radius: 31px;
  padding: 30px;
  background-position: center;
}

.pasirink:before {
  content: '';
  background-image: url('./image/forma-3.png');
  background-repeat: no-repeat;
  width: 34px;
  height: 34px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #1e7693;
  border-radius: 31px;
  padding: 30px;
  background-position: center;
}

.paprasta {
  display: inline-block;
  width: 10%;
  text-align: center;
}

.test {
  margin-top: 25px;
  margin-bottom: 25px;
}

.triangle:after {
  content: "";
  display: inline-block;
  background: url("./image/triangle.png") no-repeat;
  width: 30px;
  height: 18px;
  position: absolute;
  top: 26%;
  margin: 0 0 0 5px;
}

.triangle-2:after {
  content: "";
  display: inline-block;
  background: url("./image/triangle2.png") no-repeat;
  width: 30px;
  height: 18px;
  position: absolute;
  top: 26%;
  margin: 0 0 0 5px;
}

.test ul:before {
  content: '';
  position: absolute;
  top: 35%;
  border-bottom: 1px solid #1e7693;
  width: 385px;
  /* half of limiter */
  margin: 0 20px;
}

.test ul:after {
  content: '';
  position: absolute;
  top: 35%;
  border-bottom: 1px solid #f47e35;
  width: 385px;
  /* half of limiter */
  margin: 0 20px;
}

.test>ul:before {
  right: 0;
}

.test>ul:after {
  left: 0;
}

.test>ul {
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
}

.panel-group h1 {
  margin-bottom: 25px;
  border-top: 1px solid #ebebeb;
  padding-top: 25px;
  width: 100%;
}

.panel-body a {
  color: #000000;
  font-weight: 600;
}

.panel-body a:after {
  content: "\203A";
  margin-left: 20px;
  font-size: 20px;
  font-weight: 300;
}

.panel-body a {
  text-decoration: none !important;
}

.panel-heading a:after {
  font-family: 'Glyphicons Halflings';
  content: "\2212";
  /* Plus */
  float: right;
  color: grey;
  background-color: #fff;
  padding: 12px;
  font-size: 12px;
  border-radius: 6px;
}

.panel-heading a.collapsed:after {
  content: "\2b";
  /* Minus */
}
＆＃13; 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <h1>Studijų programos</h1>
  <div class="panel panel-default">
    <div class="panel-header">
      <div class="panel-heading agronomija">

        <h4 class="panel-title studijos-title">

          <a class="collapsed accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
            Agronomija</a>
        </h4>
      </div>
    </div>
    <div id="collapse1" class="panel-collapse collapse ">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-header">
      <div class="panel-heading zemes-ukio">
        <h4 class="panel-title studijos-title">
          <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2">
              Žemės ūkio technologijos
              <span>ir vadyba</span>
            </a>
        </h4>
      </div>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default ">
    <div class="panel-header">
      <div class="panel-heading maisto-kokybe">
        <h4 class="panel-title studijos-title">
          <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3">
              Maisto žaliavų kokybė
              <span>ir sauga</span>
            </a>
        </h4>
      </div>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Programa skirta parengti aukštos kvalifikacijos maisto žaliavų kokybės ir saugos specialistus, žinančius šių žaliavų įvairovę ir cheminę sudėtį, auginimo technologijas, gebančius analizuoti jų kokybinius pokyčius, turinčius darbo laboratorijoje
        įgūdžių, taikančius žinias profesinėje karjeroje. Studijuodamas išmoksi modeliuoti maisto žaliavų kokybę, identifikuoti ir analizuoti problemas, susijusias su maisto žaliavų laikymu, apdorojimu, suprasi maisto žaliavų kokybės ir saugos svarbą
        žmonių gyvenimo kokybei.
        <a href="#">Plačiau apie studijų programą</a>
      </div>
      <div class="panel-footeris">
        <div class="row">
          <div class="col-md-2 avatar">
            <img src="http://localhost/asu/wp-content/uploads/2017/04/demo-avatar.png"></div>
          <div class="col-md-6 panel-footer-text">
            <p class="panel-text">
              <strong>Kilo klausimų?</strong> Parašyk ASU studentui
            </p>
            <div class="fb-area">
              <span class="fb-icon"></span><a href="#">Vardas Pavardė</a>
            </div>
          </div>
          <button class="btn pasimatuok">Matuotis "profesija"</button>
          <div style="clear: both"></div>
        </div>

      </div>

    </div>

  </div>
  <div class="panel panel-default">
    <div class="panel-header">
      <div class="panel-heading agronomija">
        <h4 class="panel-title studijos-title">
          <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse4">
                Agronomija
              </a>
        </h4>
      </div>
    </div>
    <div id="collapse4" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-header">
      <div class="panel-heading zemes-ukio">
        <h4 class="panel-title studijos-title">
          <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse5">
                Žemės ūkio technologijos
                <span>ir vadyba</span>
              </a>
        </h4>
      </div>
    </div>
    <div id="collapse5" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-header">
      <div class="panel-heading agronomija">
        <h4 class="panel-title studijos-title">
          <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse6">
                Agronomija
              </a>
        </h4>
      </div>
    </div>
    <div id="collapse6" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-header">
      <div class="panel-heading zemes-ukio">
        <h4 class="panel-title studijos-title">
          <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse7">
                Žemės ūkio technologijos
                <span>ir vadyba</span>
              </a>
        </h4>
      </div>
    </div>
    <div id="collapse7" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题