主页 / 问题 / 636380
Accepted
Denis Bubnov
Asked:2020-03-07 14:51:11 +0800 CST2020-03-07 14:51:11 +0800 CST

Bootstrap Collapse 不适用于 setTimeout

  • 772

我敢肯定，很多人都使用过通过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停止工作。即不发生表格的显示和隐藏。按钮中的文本发生变化，它被禁用，但显示和隐藏不起作用。

当然，你可以在按钮上写字，Посмотреть/скрыть удаленные你不需要更改文本，这意味着不需要超时，但根据风水，你希望按钮被禁用并且其中的文本发生变化并且显示/ 隐藏内容有效。怎么做？

javascript

2 个回答

  1. 由于您使用的是 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>

    • 3
  2. Best Answer

    在单击被调用函数时添加对显示/隐藏条件的检查时：

    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 related to events 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为了回答的完整性而翻译和附加的事件信息：

    事件

    1. show.bs.collapse- 在可折叠元素即将显示时发生 - 在可折叠元素显示之前发生；
    2. shown.bs.collapse- 当可折叠元素完全显示时发生（在 CSS 转换完成后）
    3. hide.bs.collapse- 发生在可折叠元素即将被隐藏时 - 发生在可折叠元素被隐藏之前；
    4. hidden.bs.collapse- 当可折叠元素完全隐藏时发生（在 CSS 转换完成后）
    • 1

相关问题