javascript - 事件触发两次

Question

根据要求，点击按钮，触发事件是宽屁股橙色按钮

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

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

http://jsfiddle.net/zy73nd2c/

在上面的 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") 和 .is(":hidden") 在特定的求值时间可以具有相同的值。

可能的解决方法:在选择的 $element 上切换一个类，然后使用 $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});
    });
});