начальная гармошка 4 не закрывается - PullRequest
Новая
       20

начальная гармошка 4 не закрывается

0 голосов
/ 04 сентября 2018

У меня проблемы с аккордеоном. Отображается нормально. Но когда я открываю аккордеон, я хочу, чтобы другие аккордеоны закрывались автоматически. Я понятия не имею, почему это не так. ниже мой HTML и CSS. Я много искал в Google, но не смог найти хорошего решения. Я надеюсь, что кто-то может помочь мне найти, что не так.

Большое спасибо 

.panel-heading .accordion-toggle:after {
  font-family: FontAwesome;
  content: "\f068";
  float: right;
}

.panel-heading .accordion-toggle.collapsed:after {
  float: right !important;
  content: "\f067";
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/2972279885.js"></script>
<div class="container">
  <div class="panel-group" id="accordion" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#shapes" aria-expanded="false">
                    Shapes
                </a>
        </h4>
      </div>
      <div id="shapes" class="panel-collapse collapse">
        <div class="panel-body">
          <ul>
            <li>Line</li>
            <li>Circle</li>
            <li>Rectangle</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#basicshapes" aria-expanded="false">
                    Basic Shapes
                </a>
        </h4>
      </div>
      <div id="basicshapes" class="panel-collapse collapse">
        <div class="panel-body">
          <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#components" aria-expanded="false">
                    Components
                </a>
        </h4>
      </div>
      <div id="components" class="panel-collapse collapse">
        <div class="panel-body">
          <ul>
            <li>Station</li>
            <li>Zone</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 04 сентября 2018

Вы можете добавить скрипт как этот 

   var $myGroup = $('#accordion');
    $myGroup.on('show.bs.collapse','.collapse', function() {
        $myGroup.find('.collapse').collapse('hide');
    });

Надеюсь, что это работает для вас

0 голосов
/ 04 сентября 2018

data-parent="#accordion" должен быть на class="panel-collapse collapse" div вместо якоря. 

.panel-heading .accordion-toggle:after {
  font-family: FontAwesome;
  content: "\f068";
  float: right;
}

.panel-heading .accordion-toggle.collapsed:after {
  float: right !important;
  content: "\f067";
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/2972279885.js"></script>
<div class="container">
  <div class="panel-group" id="accordion" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" href="#shapes" aria-expanded="false">
                Shapes
            </a>
        </h4>
      </div>
      <div id="shapes" class="panel-collapse collapse" data-parent="#accordion">
        <div class="panel-body">
          <ul>
            <li>Line</li>
            <li>Circle</li>
            <li>Rectangle</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" href="#basicshapes" aria-expanded="false">
                Basic Shapes
            </a>
        </h4>
      </div>
      <div id="basicshapes" class="panel-collapse collapse" data-parent="#accordion">
        <div class="panel-body">
          <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" href="#components" aria-expanded="false">
                Components
            </a>
        </h4>
      </div>
      <div id="components" class="panel-collapse collapse" data-parent="#accordion">
        <div class="panel-body">
          <ul>
            <li>Station</li>
            <li>Zone</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
...