如何防止双击 "click" jquery

Question

我有这个简单的 Fiddle 如果用户点击 plus 字形图标，我会显示折叠的内容并将字形图标更改为 'minus'，反之亦然点击 minus 字形。

但是，当我双击 plus 字形时，内容显示，字形并没有更改为 minus。对于下一次单击，内容会在 'minus' 字形出现时显示。如何防止双击？

HTML

<div class="divcontainer"> 
    <span>Click -----></span>
    <span class="glyphicon glyphicon-plus" data-toggle="collapse" href="#collapsecontent"></span>
</div>
<div class="collapse" id="collapsecontent">
    content
</div>

jQuery

$(document).ready(function () {
    $('.glyphicon-plus').click(function () {
        $(this).parent("div").find(".glyphicon-plus")
            .toggleClass("glyphicon-minus");
    });
});

Answer 1

也添加 dblclick 事件处理程序

$(document).ready(function () {
    $('.glyphicon-plus').click(function () {
        $(this).parent("div").find(".glyphicon-plus")
            .toggleClass("glyphicon-minus");
    });
    $('.glyphicon-plus').dblclick(function () {
        $(this).parent("div").find(".glyphicon-plus")
            .toggleClass("glyphicon-minus");
    });
});

.divcontainer{
     background:aqua;
     width:100%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="divcontainer"> 
    <span>Click -----></span>
    <span class="glyphicon glyphicon-plus" data-toggle="collapse" href="#collapsecontent"></span>
</div>
<div class="collapse" id="collapsecontent">
    content
</div>

Answer 2

只需使用您自己的 jquery 处理程序。删除 data-toggle attr 并使用这个

$(document).ready(function () {
    $('.glyphicon-plus').click(function () {
     $('.collapse').slideToggle();
     $(this).parent("div").find(".glyphicon").toggleClass("glyphicon-plus").toggleClass("glyphicon-minus");
    });
});

我想现在应该可以了。

Answer 3

试试这个

$(this).prop('disabled', true);

Answer 4

而不是 'onclick' 函数使用折叠隐藏和显示事件。请参考以下代码：

$(document).ready(function() {
  $('#collapsecontent').on('show.bs.collapse', function(args) {
    onContainerClick($(this).parent());
  });

  $('#collapsecontent').on('hide.bs.collapse', function(args) {
    onContainerClick($(this).parent());
  });
});

function onContainerClick(args) {
  $(args).find(".glyphicon-plus")
    .toggleClass("glyphicon-minus");
}

如何防止双击 "click" jquery

How to prevent double click of "click" jquery

html

javascript

jquery

twitter-bootstrap

glyphicons