如何防止双击“ click” jquery

Question

我有一个简单的小提琴 ，其中，如果用户单击plus glyphicon，则显示折叠的内容，并将glyphicon更改为“减号”，单击minus glyphicon则反之。

但是，当我双击plus glyphicon时，内容显示出来，而该glyphicon并未更改为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处理程序即可。 删除数据切换属性并使用它

$(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");
}