如何防止雙擊「點擊」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

回答

相關問題