Javascript 如何防止双击；点击"；jquery

我有一个简单的例子，如果用户单击

plus

glyphicon，我会显示折叠的内容，并将glyphicon更改为“减号”，反之亦然

但是，当我双击

加号

字形图标时，会显示内容，字形图标不会更改为

减号

。对于下一次单击，当出现“减号”图标时将显示内容。如何防止双击

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>

---

也添加

dblclick

事件处理程序

$（文档）.ready（函数（）{
$（'.glyphicon plus'）。单击（函数（）{
$（this.parent（“div”）.find（“.glyphicon plus”）
.toggleClass（“字形图标减号”）；
});
$（'.glyphicon plus'）.dblclick（函数（）{
$（this.parent（“div”）.find（“.glyphicon plus”）
.toggleClass（“字形图标减号”）；
});
});
.divcontainer{
背景：水；
宽度：100%
}

点击------>
内容
也添加
dblclick
事件处理程序


$（文档）.ready（函数（）{
$（'.glyphicon plus'）。单击（函数（）{
$（this.parent（“div”）.find（“.glyphicon plus”）
.toggleClass（“字形图标减号”）；
});
$（'.glyphicon plus'）.dblclick（函数（）{
$（this.parent（“div”）.find（“.glyphicon plus”）
.toggleClass（“字形图标减号”）；
});
});
.divcontainer{
背景：水；
宽度：100%
}

点击------>
内容
只需使用您自己的jquery处理程序即可。删除数据切换属性并使用此

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

我认为它现在应该可以工作了。
只需使用您自己的jquery处理程序。删除数据切换属性并使用此

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

我想现在应该可以用了。
试试这个

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

试试这个

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

使用折叠隐藏和显示事件，而不是“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");
}

使用折叠隐藏和显示事件，而不是“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");
}

是的。你是如何从那个问题中找到答案的$（document）.ready（function（）{$（“.glyphicon plus”）.one（'click'，function（event）{event.preventDefault（）；//do something$（this.parent（“div”）.find（.glyphicon plus”）.toggleClass（“glypicon减号”）；}）@CristiC，我试过了，但没有为这个案子工作。-按钮没有变回+button@CristiC正确地检查你的小提琴，它不会改变下一次点击的字形图标。另外，删除副本，这样我就可以得到答案。@CristiC也在你的小提琴中，它不是working@Raviteja我补充了一个答案。检查一下是的，是的。你是如何从那个问题中找到答案的$（document）.ready（function（）{$（“.glyphicon plus”）.one（'click'，function（event）{event.preventDefault（）；//do something$（this.parent（“div”）.find（.glyphicon plus”）.toggleClass（“glypicon减号”）；}）@CristiC，我试过了，但没有为这个案子工作。-按钮没有变回+button@CristiC正确地检查你的小提琴，它不会改变下一次点击的字形图标。另外，删除副本，这样我就可以得到答案。@CristiC也在你的小提琴中，它不是working@Raviteja我补充了一个答案。检查it@Alexandru-爱奥努特米海，是的。但双击事件处理程序的最大值为available@Alexandru-爱奥努特米海，是的。但最多有个双击事件处理程序可用于切换。glyphicon plus由您进行切换。glyphicon plus由您进行切换