Невозможно свернуть несколько предметов - PullRequest
Новая
       20

Невозможно свернуть несколько предметов

0 голосов
/ 06 апреля 2019

Я учусь использовать начальную загрузку для создания кнопки «Развернуть / Свернуть».У меня есть два элемента, которые можно развернуть / свернуть при нажатии, и у меня также есть основной элемент развернуть / свернуть для всех элементов.Проблема в том, когда один элемент расширяется, а другой нет.Основная кнопка «Развернуть / Свернуть» закроет первую, но откроет вторую.Как сделать так, чтобы основная кнопка расширялась / сворачивалась независимо от того, были ли элементы развернуты или нет? 

<div class="container">
<button type="button" class="btn btn-primary">Expand/Collapse</button>

  <div class="card">  
    <div class="card-body">
      <button class="card-title" data-toggle="collapse" data-target="#collapse" aria-expanded="false" aria-controls="collapse">Test</button>

      <div class="card-text" id="collapse">
      test
      </div>


      <button class="card-title" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse">
        <strong>Test2</strong>
      </button>

      <div class="card-text" id="collapse1">
     Beta2
      </div> 

    </div>
  </div>

ниже приведен код для главной кнопки: 

$(".btn-primary").click(function(){
    $(".card-text").collapse('toggle');
});

Ответы [ 2 ]

1 голос
/ 06 апреля 2019

Это был ответ для Bootstrap 3.x здесь , и концепция все та же, отдельные элементы свертывания имеют свое собственное состояние Развернуть / Свернуть, и все, что сейчас делает кнопка - это переключение состояние каждой кнопки.

Кнопка «Развернуть / свернуть все» должна отслеживать текущее состояние «Развернуть» или «Свернуть» ALL . 

$(".btn-primary").click(function(){

    if ($(this).data("closedAll")) {
        $(".collapse").collapse("show");
    }
    else {
        $(".collapse").collapse("hide");
    }

    // toggle state and remember it
    $(this).data("closedAll",!$(this).data("closedAll")); 
});

// init with all closed
$(".btn-primary").data("closedAll",true);

Демо: https://www.codeply.com/go/i5h1tBmTaa

0 голосов
/ 06 апреля 2019

Я не на 100% понял ваш вопрос, но я написал фрагмент на jsfiddle, чтобы я работал соответственно, как я понял.

Лучший способ - использовать условные операторы для проверки, свернуты ли эти компоненты или нет. Исходя из этого, мы можем использовать методы свертывания, которые упомянуты в документах по начальной загрузке 

<div class="container mt-5">
  <button id="main-button" type="button" class="btn btn-primary mb5">Expand/Collapse</button>

  <div class="card">  
    <div class="card-body">

    <button type="button" class="btn btn-info d-block m-2" data-toggle="collapse" data-target="#demo1">Demo 01</button>
    <div id="demo1" class="collapse">
      Lorem ipsum dolor sit amet
    </div>


    <button type="button" class="btn btn-info d-block m-2" data-toggle="collapse" data-target="#demo2">Demo 02</button>
    <div id="demo2" class="collapse">
      Lorem ipsum dolor sit amet
    </div>

  </div> 
</div>

Это часть jQuery 

$('.collapse').collapse();


$('#main-button').on('click',function(){
  let demo1 = $('#demo1');
  let demo2 = $('#demo2');

  if(demo1.hasClass('show') && demo2.hasClass('show')){
    demo1.collapse('hide');
    demo2.collapse('hide');
  }

  if((demo1.hasClass('show') === false) && (demo2.hasClass('show') === false) ){
    demo1.collapse('show');
    demo2.collapse('show');
  }

  if((demo1.hasClass('show') === false) && (demo2.hasClass('show') === true) ){
    demo2.collapse('hide');
  }

  if((demo1.hasClass('show') === true) && (demo2.hasClass('show') === false) ){
    demo1.collapse('hide');
  }


});

Я написал это в js fiddle, нажмите ЗДЕСЬ , чтобы увидеть его.

...