Бутстрап 4 гармошка не закрывается

Question

Бутстрап 4 гармошка не закрывается

У меня проблемы с аккордеоном. Отображается нормально. Но когда я открываю аккордеон, я хочу, чтобы другие аккордеоны закрывались автоматически. Я понятия не имею, почему это не так. ниже мой 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>

-1

html css twitter-bootstrap bootstrap-4 accordion

Источник

user864802 04 сен '18 в 09:16

2 ответа

Другие вопросы по тегам html css twitter-bootstrap bootstrap-4 accordion

user4990572 04 сен '18 в 09:20 2018-09-04 09:20 · Answer 1 · 2018-09-04 09:20

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>

user3346166 04 сен '18 в 09:22 2018-09-04 09:22 · Answer 2 · 2018-09-04 09:22

Вы можете добавить сценарий, как это

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

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

0

Источник

user3346166 04 сен '18 в 09:22