RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 636380
Accepted
Denis Bubnov
Denis Bubnov
Asked:2020-03-07 14:51:11 +0000 UTC2020-03-07 14:51:11 +0000 UTC 2020-03-07 14:51:11 +0000 UTC

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 2 个回答
  • 10 Views

2 个回答

  • Voted
  1. Crantisz
    2020-03-07T15:00:05Z2020-03-07T15:00:05Z

    由于您使用的是 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
    Denis Bubnov
    2020-03-07T16:12:08Z2020-03-07T16:12:08Z

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

    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

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    Python 3.6 - 安装 MySQL (Windows)

    • 1 个回答
  • Marko Smith

    C++ 编写程序“计算单个岛屿”。填充一个二维数组 12x12 0 和 1

    • 2 个回答
  • Marko Smith

    返回指针的函数

    • 1 个回答
  • Marko Smith

    我使用 django 管理面板添加图像,但它没有显示

    • 1 个回答
  • Marko Smith

    这些条目是什么意思,它们的完整等效项是什么样的

    • 2 个回答
  • Marko Smith

    浏览器仍然缓存文件数据

    • 1 个回答
  • Marko Smith

    在 Excel VBA 中激活工作表的问题

    • 3 个回答
  • Marko Smith

    为什么内置类型中包含复数而小数不包含?

    • 2 个回答
  • Marko Smith

    获得唯一途径

    • 3 个回答
  • Marko Smith

    告诉我一个像幻灯片一样创建滚动的库

    • 1 个回答
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Алексей Шиманский 如何以及通过什么方式来查找 Javascript 代码中的错误? 2020-08-03 00:21:37 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    user207618 Codegolf——组合选择算法的实现 2020-10-23 18:46:29 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5