1

Наверняка многие пользовались функциональностью для отображения и скрытия определенного контента посредством Bootstrap Collapse. Вот и я пользуюсь, все успешно, но у меня возникли некие недочеты, которые я хотел убрать. Есть следующий код:

<input id="btnShowHideDeletedLft" 
       onclick="changeTextBtnDeletedLft()" 
       type="button" 
       class="btn btn-info" 
       data-toggle="collapse" 
       data-target="#tblDeletedLft" 
       value="Посмотреть удаленные" />

<div id="tblDeletedLft" class="collapse" style="margin-top: 10px;">
     @* тут мой контент - небольшая таблица *@
</div>    

Данный блок кода успешно отрабатывает. Но, ведь есть еще JavaScript, в котором меняется текст моей кнопки, вот он:

function changeTextBtnDeletedLft() {
    var elem = document.getElementById("btnShowHideDeletedLft");
    //elem.disabled = true;

    if (elem.value === 'Посмотреть удаленные') {
        elem.value = 'Скрыть удаленные';
    } else {
        elem.value = 'Посмотреть удаленные';
    }
    //setTimeout(function() { elem.disabled = false; }, 500);
}

Этот код тоже работает, но увы, он работает не так, как мне хотелось бы, именно в нем и проблема, а именно: если быстро дважды кликнуть на кнопку, то текст в ней изменится дважды, а таблица отобразится (скроется) один раз. В результате тест в кнопке будет Посмотреть удаленные и таблица уже будет отображена, либо наоборот, то есть будет несоответствие надписи в кнопке и контента.

После этого меня посетила мысль, а что если дизэйблить кнопку на пол секунды после клика, как раз за это время таблица успеет отобразиться, а пользователь не кликнет дважды подряд!

Если задействовать закомментированный код в JavaScript, то Collapse перестает работать. То есть отображения и скрытия таблицы не происходит. Текст в кнопке меняется, она дизэйблится, но отображение и скрытие не работает.

Конечно, можно написать на кнопке Посмотреть/скрыть удаленные и не нужно будет менять текст, а значит и таймауты не нужны, но хочется по фэн-шую, чтобы кнопка дизэйблилась и текст в ней менялся и отображение/скрытие конента работало. Как это сделать?

2 ответа 2

3

Раз вы используете Bootstrap, у вас должен быть подключен jQuery.

В момент скрытия элемента блок имеет класс collapsing, по которому можно точно определить, что элемент в данный момент анимируется. В этом случае, отменяем выполнение скрипта:

if ($(elem.data("target")).is(".collapsing")) return;

Итого:

function changeTextBtnDeletedLft() {

  var elem = $("#btnShowHideDeletedLft");

  if ($(elem.data("target")).is(".collapsing")) return;
  

  if (elem.val() === 'Посмотреть удаленные') {
    elem.val('Скрыть удаленные');
  } else {
    elem.val('Посмотреть удаленные');
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<input id="btnShowHideDeletedLft" onclick="changeTextBtnDeletedLft()" type="button" class="btn btn-info" data-toggle="collapse" data-target="#tblDeletedLft" value="Посмотреть удаленные" />

<div id="tblDeletedLft" class="collapse" style="margin-top: 10px;">
  @* тут мой контент - небольшая таблица *@
</div>

4
  • Немного изменил Ваш код, чтобы заработало, добавил обертку $(elem) для элемента вот так: if ($($(elem).data("target")).is(".collapsing")) return; Но, все также не работает. Какая-то магия, я удивлен, если посмотреть контент, то там все в норме, контент подгружается на страницу сразу, просто скрыт. Единственное, чего нет, так это подключенных стилей bootstrap.min.css и bootstrap-theme.min.css на странице, но не думаю, что это прям большая проблема. Поиски продолжаются. 7 мар 2017 в 7:39
  • Когда происходить открытие или закрытие элемента bootstrap перед выполнением проверяет выполняется оно сейчас или нет. Если идет анимация то ничего не делает, если не идет то раскрывает или закрывает элемент снова. Эта проверка для того чтобы элемент не сломался или не скакал туда сюда при быстрых нажатиях. Собственно у вас такой проверки не было и клики работали моментально.
    – DarkSir
    7 мар 2017 в 7:40
  • Да, посмотрите как я получаю контент, не так как у вас: var elem = $("#btnShowHideDeletedLft"); Я использую jQuery тут тоже
    – Crantisz
    7 мар 2017 в 8:02
  • Что делает Ваш код - я понимаю, но не понимаю, почему он работает не так, как здесь на SO в сниппете. Спасибо Вам за ответ, он полезен. Решение реализовал немного иначе, пояснив, что collapsing происходит после вызова функции changeTextBtnDeletedLft(). Вам +1 :) 7 мар 2017 в 8:14
1

При добавлении проверки условия отображения/скрытия в момент нажатия в вызываемую функцию:

if ($($(elem).data("target")).is(".collapsing")) return;

выражение внутри проверки всегда false. В отладке удалось выяснить, что collapsing происходит после завершения работы функции changeTextBtnDeletedLft(). Причину такого поведения выяснить не удалось и пришлось выбрать иное решение, без проверки.

На просторах SO нашел этот ответ: jQuery show.bs.collapse event for nested Bootstrap collapsible buttons fires on more buttons than expected, связанный с событиями Collapse. Идею для решения своей задачи взял из этого ответа.

Дополнил и модифицировал свой JavaScript обработкой событий Collapse, возникающих в момент скрытия и отображения контента:

<script type="text/javascript">    

    var elemBtnShowHide = document.getElementById("btnShowHideDeletedLft");

    function changeTextBtnDeletedLft() { // меняем текст в кнопке
        if (elemBtnShowHide.value === 'Посмотреть удаленные лифты') {
            elemBtnShowHide.value = 'Скрыть удаленные лифты';
        } else {
            elemBtnShowHide.value = 'Посмотреть удаленные лифты';
        }
    }

    $('#tblDeletedLft').on('shown.bs.collapse', function () { // после отображения
        elemBtnShowHide.disabled = false; // кнопка активна
    }).on('show.bs.collapse', function () { // перед отображением
        elemBtnShowHide.disabled = true; // кнопка не активна
    });

    $('#tblDeletedLft').on('hidden.bs.collapse', function () { // после скрытия
        elemBtnShowHide.disabled = false; // кнопка активна
    }).on('hide.bs.collapse', function () { // перед скрытием
        elemBtnShowHide.disabled = true;  // кнопка не активна
    });   
</script>

Функцию смены текста кнопки оставил без изменений, добавил обработку событий Collapse. Таким образом кнопка дизэйблится в начале анимации и становится активной после ее завершения для обоих случаев, как для отображения, так и для скрытия.

Всю необходимую дополнительную информацию по событиям Collapse нашел тут: Bootstrap JS Collapse. Информацию по событиям Collapse перевел и прикрепил для полноты ответа:

События Collapse

  1. show.bs.collapse - occurs when the collapsible element is about to be shown - происходит, перед тем как складной элемент будет показан;
  2. shown.bs.collapse - occurs when the collapsible element is fully shown (after CSS transitions have completed) - происходит, когда складной элемент полностью отображен (после того как CSS-переходы завершены);
  3. hide.bs.collapse - occurs when the collapsible element is about to be hidden - происходит, перед тем как складной элемент будет скрыт;
  4. hidden.bs.collapse - occurs when the collapsible element is fully hidden (after CSS transitions have completed) - происходит, когда складной элемент полностью скрыт (после того, как CSS-переходы завершены)

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.