Question

我有这么简单的Fiddle，如果用户点击plus 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处理程序。删除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

4 个答案: