Наверняка многие пользовались функциональностью для отображения и скрытия определенного контента посредством 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
перестает работать. То есть отображения и скрытия таблицы не происходит. Текст в кнопке меняется, она дизэйблится, но отображение и скрытие не работает.
Конечно, можно написать на кнопке Посмотреть/скрыть удаленные и не нужно будет менять текст, а значит и таймауты не нужны, но хочется по фэн-шую, чтобы кнопка дизэйблилась и текст в ней менялся и отображение/скрытие конента работало. Как это сделать?