Кнопка Bootstrap, чтобы закрыть все складные элементы - PullRequest
Новая
       18

Кнопка Bootstrap, чтобы закрыть все складные элементы

1 голос
/ 25 апреля 2020

В моем файле HTML есть следующий код: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="list-group list-group-flush">
  <a href="javascript: void(0)" data-parent=".list-group" class="list-group-item list-group-item-action filter-options" data-group="all"><b>Home</b></a>
  <a data-toggle="collapse" href="#itSection" class="list-group-item list-group-item-action"><b>IT</b></a>
  <div id="itSection" class="list-group collapse">
    <a href="javascript: void(0)" class="list-group-item list-group-item-action menu2 filter-options" data-group="devops">DevOps</a>
  </div>
  <a data-toggle="collapse" href="#pdSection" class="list-group-item list-group-item-action"><b>Product
                    Development</b></a>
  <div id="pdSection" class="list-group collapse">
    <a href="javascript: void(0)" class="list-group-item list-group-item-action menu2 filter-options" data-group="travelandcppd">Travel &
                    CP</a>
    <a href="javascript: void(0)" class="list-group-item list-group-item-action menu2 filter-options" data-group="sfandcppd">SF &
                    CP</a>
  </div>
  <a href="javascript: void(0)" class="list-group-item list-group-item-action filter-options" data-group="management"><b>Management</b></a>
  <a href="javascript: void(0)" class="list-group-item list-group-item-action filter-options" data-group="marketing"><b>Marketing</b></a>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Как вы можете видеть в коде, у меня есть несколько разделов с подменю.

Я пытаюсь использовать атрибут data-parent, чтобы свернуть все развернутые элементы, если Главная нажата. Можете ли вы указать мне правильное направление здесь?

Ответы [ 3 ]

2 голосов
/ 25 апреля 2020

Вы можете просто изменить разметку ... 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="list-group list-group-flush">
        <a href="javascript: void(0)" data-parent=".container" data-toggle="collapse" data-target=".list-group.show" class="list-group-item list-group-item-action filter-options" data-group="all"><b>Home</b></a>
        <a data-toggle="collapse" href="#itSection" class="list-group-item list-group-item-action"><b>IT</b></a>
        <div id="itSection" class="list-group collapse">
            <a href="javascript: void(0)" class="list-group-item list-group-item-action menu2 filter-options" data-group="devops">DevOps</a>
        </div>
        <a data-toggle="collapse" href="#pdSection" class="list-group-item list-group-item-action"><b>Product Development</b></a>
        <div id="pdSection" class="list-group collapse">
            <a href="javascript: void(0)" class="list-group-item list-group-item-action menu2 filter-options" data-group="travelandcppd">Travel & CP</a>
            <a href="javascript: void(0)" class="list-group-item list-group-item-action menu2 filter-options" data-group="sfandcppd">SF & CP</a>
        </div>
        <a href="javascript: void(0)" class="list-group-item list-group-item-action filter-options" data-group="management"><b>Management</b></a>
        <a href="javascript: void(0)" class="list-group-item list-group-item-action filter-options" data-group="marketing"><b>Marketing</b></a>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Демо: https://codeply.com/p/t0Pb45zkuI

0 голосов
/ 25 апреля 2020

Добавить ниже скрипт 

$("a[data-toggle='collapse']").click(() => {
    $(".collapse").removeClass('show');
});


$("a[data-toggle='collapse']").click(() => {
  $(".collapse").removeClass('show');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="list-group list-group-flush">
  <a href="javascript: void(0)" data-parent=".list-group" class="list-group-item list-group-item-action filter-options" data-group="all"><b>Home</b></a>
  <a data-toggle="collapse" href="#itSection" class="list-group-item list-group-item-action"><b>IT</b></a>
  <div id="itSection" class="list-group collapse">
    <a href="javascript: void(0)" class="list-group-item list-group-item-action menu2 filter-options" data-group="devops">DevOps</a>
  </div>
  <a data-toggle="collapse" href="#pdSection" class="list-group-item list-group-item-action"><b>Product
                    Development</b></a>
  <div id="pdSection" class="list-group collapse">
    <a href="javascript: void(0)" class="list-group-item list-group-item-action menu2 filter-options" data-group="travelandcppd">Travel &
                    CP</a>
    <a href="javascript: void(0)" class="list-group-item list-group-item-action menu2 filter-options" data-group="sfandcppd">SF &
                    CP</a>
  </div>
  <a href="javascript: void(0)" class="list-group-item list-group-item-action filter-options" data-group="management"><b>Management</b></a>
  <a href="javascript: void(0)" class="list-group-item list-group-item-action filter-options" data-group="marketing"><b>Marketing</b></a>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
0 голосов
/ 25 апреля 2020 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="list-group list-group-flush">
  <a href="javascript: void(0)" data-parent=".list-group" class="list-group-item list-group-item-action filter-options" data-group="all"><b>Home</b></a>
  <a data-toggle="collapse" href="#itSection" class="list-group-item list-group-item-action"><b>IT</b></a>
  <div id="itSection" class="list-group collapse">
    <a href="javascript: void(0)" class="list-group-item list-group-item-action menu2 filter-options" data-group="devops">DevOps</a>
  </div>
  <a data-toggle="collapse" href="#pdSection" class="list-group-item list-group-item-action"><b>Product
                    Development</b></a>
  <div id="pdSection" class="list-group collapse">
    <a href="javascript: void(0)" class="list-group-item list-group-item-action menu2 filter-options" data-group="travelandcppd">Travel &
                    CP</a>
    <a href="javascript: void(0)" class="list-group-item list-group-item-action menu2 filter-options" data-group="sfandcppd">SF &
                    CP</a>
  </div>
  <a href="javascript: void(0)" class="list-group-item list-group-item-action filter-options" data-group="management"><b>Management</b></a>
  <a href="javascript: void(0)" class="list-group-item list-group-item-action filter-options" data-group="marketing"><b>Marketing</b></a>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
   $("a[data-parent=\".list-group\"]").click(() => {
        $("div.collapse").removeClass("show");
        //your eextra code here
    });
</script>
...