Bootstrap начало сворачивания открывается / сворачивается в зависимости от значения CheckBox - PullRequest
Новая
       4

Bootstrap начало сворачивания открывается / сворачивается в зависимости от значения CheckBox

0 голосов
/ 08 мая 2020

Форма содержит несколько флажков и область div, которая должна быть свернута или видна в зависимости от значения флажка. Я использую Bootstrap 3.

При переключении div при изменении состояния флажка не проблема, я смог выяснить, как запустить div в правильном состоянии: 

<input type="checkbox" id="someCheckbox">

<div id="collapseContainer">
    ...
</div>

<script type="text/javascript">
    var $collapseContainer = $('#collapseContainer');
    $collapseContainer.collapse({
        toggle: true    // THIS HAS NO EFFECT
    });

    var $checkbox = $('#someCheckbox');
    $checkbox.change(function() { 
        // Toggle the Container when CheckBox is clicked
        $collapseContainer.collapse('toggle');
    }); 

    if ($checkbox.is(':checked') == false) {
        // Solution from other thread - DOES NOT WORK
        $collapseContainer.removeClass('in');
    //}
</script>

В ответах на аналогичный вопрос предлагается вручную удалить класс in, чтобы установить его в состояние collapsed, но это не работает. Кажется, что применение плагина запускает анимацию, которая добавляет класс in только по завершении. Таким образом, in отсутствует при проверке начального состояния флажка.

Как решить эту проблему?

EDIT:

Чтобы прояснить это: если установлен флажок при загрузке страницы, div должен начинаться как расширенный . Если флажок не установлен, div должен быть свернутым .

В моих тестах добавление опции toggle: true к вызову плагина не имело абсолютно никакого значения.

РЕДАКТИРОВАТЬ 2:

Я использовал ответ @pc_coder для создания следующего простого файла HTML. Хотя фрагмент в его ответе, кажется, работает просто идеально, версия HTML - нет. Единственная разница между checkbox1 и checkbox2 состоит в том, что № 2 отображается сразу же, пока появляется анимация checkbox1. Но фактическая цель, то есть nr. 1 скрыт, а № 2 не работает.

Единственное отличие от фрагмента в том, что я помещаю весь код в $(document).ready. Если я оставлю код настройки снаружи, он вообще не сработает. 

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">         
            $(document).ready(function() { 
                var $checkbox = $('#someCheckbox');
                var $checkbox2 = $('#someCheckbox2');

                var $collapseContainer = $('#collapseContainer');
                var $collapseContainer2 = $('#collapseContainer2');

                $checkbox.change(function() { 
                    $collapseContainer.collapse('toggle');
                }); 

                $checkbox2.change(function() { 
                    $collapseContainer2.collapse('toggle');
                });

                $collapseContainer.collapse($checkbox.prop('checked') ? "show" : "hide");
                $collapseContainer2.collapse($checkbox2.prop('checked') ? "show" : "hide");
            }); 
        </script>

        <input type="checkbox"checked id="someCheckbox" />
        <div id="collapseContainer" >
            Lorem ipsum dolor sit amet, consectetur adipisicing elit
        </div>

        <input type="checkbox" id="someCheckbox2" />

        <div id="collapseContainer2" class="collapse">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,        
        </div>
    </body>
</html>

1 Ответ

1 голос
/ 08 мая 2020

В сворачивании Есть три типа: toggle (по умолчанию true), show, hide В начале вы можете использовать один, если рядом установлен флажок, а затем показать скрыть в зависимости от ситуации. Если вы хотите видеть, когда страница загружена, вам нужно поместить ее в document.ready

$(document).ready(function() {
   $collapseContainer.collapse($checkbox.prop('checked') ? "show" : "hide");
 });


var $collapseContainer = $('#collapseContainer');
var $collapseContainer2 = $('#collapseContainer2');
var $checkbox2 = $('#someCheckbox2');

$checkbox2.change(function() { 
    $collapseContainer2.collapse('toggle');
}); 

var $checkbox = $('#someCheckbox');
$checkbox.change(function() { 
  $collapseContainer.collapse('toggle');
}); 

$(document).ready(function() {
   $collapseContainer.collapse($checkbox.prop('checked') ? "show" : "hide");
   $collapseContainer2.collapse($checkbox2.prop('checked') ? "show" : "hide");
});
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<input type="checkbox"checked id="someCheckbox" />
<div id="collapseContainer" class="collapse" >
    Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
    
<input type="checkbox" id="someCheckbox2" />

<div id="collapseContainer2" class="collapse" >
   Lorem ipsum dolor sit amet, consectetur adipisicing elit,        
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...