如何防止双击“点击”jquery

我有这个简单的Fiddle，如果用户点击plus图形，我会显示折叠的内容，并在点击minus glyphicon时将图标更改为“减号”，反之亦然。如何防止双击“点击”jquery

但是，当我双击plus图形时，内容显示并且图形不会更改为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"); 
    }); 
});

来源

2017-02-28 Raviteja

是的，它是。你是如何尝试从这个问题的解决方案？ $（document）.ready（function（）{（“。glyphicon-plus”）。one（'click'，function（event）{ event.preventDefault（）; // do something $（this）（“div”）。find（“。glyphicon-plus”） .toggleClass（“glyphicon-minus”）; }）; }）; – CristiC

@CristiC，我试过了，但不适合这种情况。 - 按钮不会变回+按钮 –

@CristiC正确检查您的小提琴，它不会更改下次点击的图标。另外，删除重复，以便我会得到答案。 – Raviteja

添加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>

来源

2017-02-28 10:52:08

三重点击不起作用。 –

@ Alexandru-IonutMihai，是 – Raviteja

是的。但最大的双击事件处理程序可用 –

只需使用您自己的jQuery处理程序。删除数据开关attr并使用这个

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

我认为它现在应该工作。

来源

2017-02-28 11:31:50

切换.glyphicon-plus在您身边 –

试试这个

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

来源

2017-02-28 11:54:18

如何防止双击“点击”jquery

回答

相关问题