огня события дважды

Question

По желанию кнопки нажать, чтобы запустить событие кнопки широкой задниц оранжевого

этот огнь, предполагает, чтобы добавить 12 VH на высоту #pfcontainer_inner_friends_list, а затем на 2-ой нажмите кнопку Удалить высота снова

Кстати, Я не ищу решение, которое не влечет за собой ДОБАВЛЕНИЕ или СУБТРАКЦИЯ высоты. Высота элемента должна оставаться на 10.2vh, а огонь, ИДЕТ, добавить или вычесть заданную высоту.

http://jsfiddle.net/zy73nd2c/

В вышеприведенной скрипке, я пытался демонстрировать как мой 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.hasClass(...), чтобы решить, следует ли увеличивать или уменьшать высоту.

Это работает как JS в вашем 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

Вместо проверки .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/