事件触发两次

Question

根据要求，用于单击和触发事件的按钮是橙色宽按钮

这场火灾假设将 12 vh 添加到 #pfcontainer_inner_friends_list 的高度，然后在第 2 次单击时再次删除高度

顺便说一句；我不是在寻找不需要增加或减少高度的解决方案。元素的高度必须保持在 10.2vh，并且火必须增加或减去给定的高度。

在上面的 fiddle 中，我尝试展示了我的 jQuery 如何在点击时触发两次。我该如何解决这个问题？

$(function () {
$('.click-nav1 > ul').toggleClass('no-js js');
$('.clicker1').click(function (e) {
    $('.click-nav1 .js ul').slideToggle(200);
    $('.clicker1').toggleClass('active');
    e.stopPropagation(); 
});
$('.clicker1').click(function () {
    if ($('.click-nav1 .js ul').is(':visible')) {
        $('.click-nav1 .js ul', this).slideUp();
        $('.clicker1').removeClass('active');
    }
});
});
$(function () {
$('.clicker1').click(function () { 
   if ($('.click-nav1 .js ul').is(':visible')) {
       $("#pfcontainer_inner_friends_list ul").animate({"height" :      "+=12vh"});}
});
});
$(function () {
$('.clicker1').click(function () { 
   if ($('.click-nav1 .js ul').is(':hidden')) {
       $("#pfcontainer_inner_friends_list ul").animate({"height" : "-    =12vh"});}
});
});

Answer 1

而不是检查 .is(':visible') 检查 .height():

$('.clicker1').click(function () { 
    if ($('.click-nav1 .js ul').height()>1) {
        $("#pfcontainer_inner_friends_list ul").animate({"height" : "+=12vh"});
    }else{
        $("#pfcontainer_inner_friends_list ul").animate({"height" : "-=12vh"});
    }
});

Fiddle: http://jsfiddle.net/zy73nd2c/3/

Answer 2

显然，.is(":visible") 和 .is(":hidden") 可以在某个计算时间具有相同的值。

可能的解决方法：在选择的 $element 上切换 class，然后使用 $element.hasClass(...) 决定是增加还是减少高度。

这在您的 jsfiddle 中用作 js：

$(function () {
    $('.click-nav1 > ul').toggleClass('no-js js');
    $('.clicker1').click(function (e) {
        $('.click-nav1 .js ul').toggleClass('vis').slideToggle(200);
        $('.clicker1').toggleClass('active');
        e.stopPropagation(); 
    });
    $('.clicker1').click(function () {
        if ($('.click-nav1 .js ul').is(':visible')) {
            $('.click-nav1 .js ul', this).slideUp();
            $('.clicker1').removeClass('active');
        }
    });
    $('.clicker1').click(function () {
        var dh = $('.click-nav1 .js ul').hasClass('vis') ? "+=12vh" : "-=12vh";
        $("#pfcontainer_inner_friends_list ul").animate({"height" : dh});
    });
});

事件触发两次

Event fire twice

javascript

jquery

events