Question

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

这个火是假设在#pfcontainer_inner_friends_list的高度增加12 vh，然后在第二次点击时再次删除高度

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

在上面的小提琴中，我试图展示我的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"});
    }
});

小提琴：http://jsfiddle.net/zy73nd2c/3/

Answer 2

显然，.is(":visible")和.is(":hidden")在评估的特定时间可以具有相同的值。

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

事件发生两次

2 个答案: