Bootstrap 4 рушится, а не закрывается автоматически

Я использую бутстрап 4 коллапс, я столкнулся с некоторым конфликтом в этой опции, я добавил два коллапса в один и тот же div. когда я нажимаю 1-й коллапс, а затем нажимаю коллапс 2, но коллапс 1 не закрывается автоматически, в чем проблема, кто-нибудь знает, как решить эту проблему Спасибо

Мой пример кода

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin = "anonymous"></script>


<div>
  <p>

    <button class = "btn btn-primary" type = "button" data-toggle = "collapse" data-target = "#collapseExample" aria-expanded = "true" aria-controls = "collapseExampled">
      Collapse 01
    </button>
  </p>
  <div class = "collapse" id = "collapseExample">
    <div class = "card card-body">
      cccAnim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
    </div>
  </div>
<br>

  <p>

    <button class = "btn btn-primary" type = "button" data-toggle = "collapse" data-target = "#collapseExamples" aria-expanded = "true" aria-controls = "collapseExampled">
      Collapse 002
    </button>
  </p>
  <div class = "collapse" id = "collapseExamples">
    <div class = "card card-body">
      cccAnim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
    </div>
  </div>
</div>

Вы можете использовать jQuery, чтобы закрыть другой div при первом нажатии.

— 01.07.2019 05:23

javascript css bootstrap-4 collapse

01.07.2019 05:08

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 845

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я думаю, вы использовали Несколько целей Попробуйте использовать Пример аккордеонаhttps://getbootstrap.com/docs/4.3/components/collapse/#accordion-example Надеюсь, это поможет

<!DOCTYPE html>
<html>
<head>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width">
  <title>JS Bin</title>
  <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">
</head>
<body>
<div class = "accordion" id = "accordionExample">
  <div class = "">
    <div class = "" id = "headingOne">
      <h2 class = "mb-0">
        <button class = "btn btn-primary" type = "button" data-toggle = "collapse" data-target = "#collapseOne" aria-expanded = "true" aria-controls = "collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id = "collapseOne" class = "collapse show" aria-labelledby = "headingOne" data-parent = "#accordionExample">
      <div class = "card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class = "card">
    <div class = "" id = "headingTwo">
      <h2 class = "mb-0">
        <button class = "btn btn-primary collapsed" type = "button" data-toggle = "collapse" data-target = "#collapseTwo" aria-expanded = "false" aria-controls = "collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id = "collapseTwo" class = "collapse" aria-labelledby = "headingTwo" data-parent = "#accordionExample">
      <div class = "card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class = "card">
    <div class = "" id = "headingThree">
      <h2 class = "mb-0">
        <button class = "btn btn-primary collapsed" type = "button" data-toggle = "collapse" data-target = "#collapseThree" aria-expanded = "false" aria-controls = "collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id = "collapseThree" class = "collapse" aria-labelledby = "headingThree" data-parent = "#accordionExample">
      <div class = "card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
<script
  src = "https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin = "anonymous"></script>
</body>
</html>

01.07.2019 05:33

То, что вы ищете, - это пример свертывания аккордеона, который держит только один открытым, а остальные закрыты, управляет этим с помощью классов "свернуть и показать":

<head>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">
</head>
<body>
<div class = "accordion" id = "accordionExample">
  <div class = "card">
    <div class = "card-header" id = "headingOne">
      <h2 class = "mb-0">
        <button class = "btn btn-link" type = "button" data-toggle = "collapse" data-target = "#collapseOne" aria-expanded = "true" aria-controls = "collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id = "collapseOne" class = "collapse show" aria-labelledby = "headingOne" data-parent = "#accordionExample">
      <div class = "card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class = "card">
    <div class = "card-header" id = "headingTwo">
      <h2 class = "mb-0">
        <button class = "btn btn-link collapsed" type = "button" data-toggle = "collapse" data-target = "#collapseTwo" aria-expanded = "false" aria-controls = "collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id = "collapseTwo" class = "collapse" aria-labelledby = "headingTwo" data-parent = "#accordionExample">
      <div class = "card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class = "card">
    <div class = "card-header" id = "headingThree">
      <h2 class = "mb-0">
        <button class = "btn btn-link collapsed" type = "button" data-toggle = "collapse" data-target = "#collapseThree" aria-expanded = "false" aria-controls = "collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id = "collapseThree" class = "collapse" aria-labelledby = "headingThree" data-parent = "#accordionExample">
      <div class = "card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
  
 <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"></script>
</body>

01.07.2019 05:34

Другие вопросы по теме

Почему стиль CSS «visibility:visible» появляется в моем списке узлов только тогда, когда я ввожу его непосредственно в свой HTML?

Разрешено ли использовать только некоторые свойства css с объектами Gatsby activeStyles?

Bootstrap Navbar Переключение активного состояния Bootstrap (связанный с JavaScript)

Нужна помощь в размещении дочернего элемента HTML за родительским элементом с помощью CSS

Почему мой контейнер сетки не расширяется, несмотря на несколько элементов сетки?

Svg повернуть шаблон шестиугольника - шестиугольник указывает вверх

Начальная модель

Создать сетку изображений - bootstrap4

Разрыв встроенного блока с заполнением

Изменить цвет фона на панель навигации в bootstrap-vuejs

Bootstrap 4 рушится, а не закрывается автоматически

Ответы 2

Другие вопросы по теме

Похожие вопросы