Я хочу нажать кнопку, чтобы переключить div slideUp & slideDown и быстрее в другом месте на странице, чтобы закрыть div

Question

У меня есть кнопка #clickme. При нажатии на div #cart слайд вверх, при повторном нажатии он сдвигается вниз.

Я также хочу, чтобы иметь возможность закрыть его, щелкнув в другом месте на странице, кроме #cart или #clickme.

Код, который я пытался, не совсем работает. Что происходит сейчас, так это то, что когда я нажимаю #clickme, он соскальзывает, а затем быстро возвращается назад.

Я представляю, что происходит, когда событие click инициируется как на уровне документа, так и на уровне #clickme, вызывая один эффект после другого.

Какая элегантная дорога вокруг этого?

$('#clickme').click(function() { 
    if ($("#cart").is(":hidden")) { 
     $("#cart").slideDown("slow"); 
    } else { 
     $("#cart").slideUp("slow"); 
    } 
}); 

$(document.body).click(function() { 
    if ($("#cart").not(":hidden")) { 
     $("#cart").slideUp("slow"); 
    } 
}); 

Answer 1

Как jAndy состояния проблемы пузырится здесь событие, но вам, так как вы спросили «есть более элегантный способ», да есть :)

Если воспользоваться .slideToggle() и :visible selector, ваш код приходит очень немногословен на самом деле, вы можете сделать это:

$('#clickme').click(function(e) { 
    $("#cart").stop(true, true).slideToggle("slow"); 
    e.stopPropagation(); 
}); 

$(document).click(function() { 
    $("#cart:visible").stop(true, true).slideUp("slow"); 
}); 

.slideToggle() делает почти именно чек вы делаете, разница заключается в том, что проверяет, когда он получает там, так что в случае очереди анимации это даже лучше. И используя :visible, мы выбираем только #cart, если он виден и ему нужно свернуть, иначе ничего не выбрано. Вызов .stop() предназначен только для предотвращения очереди анимации для быстрых кликов, проверки и просмотра того, какое поведение вы хотите, эта часть является необязательной.

И последний звонок event.stopPropagation() состоит в том, чтобы предотвратить событие щелчка от пузырьков до документа и его запуск .click() обработчик, (click here for more info on that).

Answer 2

Поскольку вы привязки click event к document.body, ваш click event связан с #clickmeпузырьков вверх к документу и запускает обработчик там.

Вы должны вызвать .stopPropagation() в обработчике #clickme события:

$('#clickme').click(function(e) { 
    e.stopPropagation(); 

    if ($("#cart").is(":hidden")) { 
     $("#cart").slideDown("slow"); 
    } else { 
     $("#cart").slideUp("slow"); 
    } 
}); 

Это предотвратит click event бурлит в DOM.

Sitenote: Вам следует серьезно прочитать о Кэширование DOM-ссылок. Вы запрашиваете тот же самый элемент, что и 6 раз в этом маленьком фрагменте кода. Сделать это один раз

var $cart = $('#cart'); 

и использовать $cart оттуда. Там может быть достигнута большая производительность.

Пример: http://www.jsfiddle.net/EuzyL/1/

Answer 3

Попробуйте это,

var toggleThis = function() { 
    if ($("#cart").is(":hidden")) { 
     $("#cart").slideDown("slow"); 
    } else { 
     $("#cart").slideUp("slow"); 
    } 
}; 

$('#clickme').click(toggleThis); 
$('#clickme').blur(toggleThis); 

$(document.body).click(function() { 
    if ($("#cart").not(":hidden")) { 
     $("#cart").slideUp("slow"); 
    } 
}); 

Счастливый кодирования.