feu événement deux fois

Question

Sur demande, le bouton à cliquer, pour déclencher l'événement est le bouton orange grand cul

ce feu est supposé ajouter 12 vh à la hauteur de #pfcontainer_inner_friends_list, puis sur 2 clic supprimer la hauteur à nouveau

Par ailleurs; Je ne cherche pas une solution qui n'implique pas d'ajouter ou de soustraire la hauteur. La hauteur de l'élément doit rester sur 10.2vh, et les feux doivent, ajouter, ou soustraire une hauteur donnée. Dans le violon au-dessus

http://jsfiddle.net/zy73nd2c/

, j'ai essayé démontrer à quel point mon jQuery tire deux fois sur un clic. Comment puis-je réparer ça?

$(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

Apparemment, .is(":visible") et .is(":hidden") peut avoir la même valeur à un certain moment de l'évaluation. Solution de contournement possible: Basculez une classe sur l'élément $ de votre choix, puis utilisez $element.hasClass(...) pour décider d'augmenter ou de réduire la hauteur.

Cela fonctionne comme js dans votre jsFiddle:

$(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}); 
    }); 
}); 

Answer 2

Au lieu de vérifier .is(':visible') chèque .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/