Как я могу переключить видимость элемента DIV?

Question

Я пытаюсь переключить DIV элемент с помощью JQuery, хороший пример этого реализовано щелкают кнопку зарегистрируйтесь на Udemy.

Я реализовал нечто подобное с помощью JQuery, но я уверен, что, чтобы получить эффект, который я «Я ищу, мне придется использовать JavaScript, но это просто, что я не знаю, как использовать JavaScript.

Моя реализация будет видна в моей скрипке here, я изначально установил div в display:none и использовал jQuery, чтобы отобразить нажатие кнопки div.
Как вы можете сказать со скрипкой, он отображается с увеличивающейся анимацией вместо того, чтобы просто появляться (не уверен, как это изменить), и я не могу заставить div исчезнуть, снова нажав кнопку.

Также, как я могу реализовать функциональность, чтобы заставить div исчезнуть, щелкнув в любом месте экрана?

Спасибо всем за то, что нашли время, чтобы помочь мне.

Answer 1

Проблема, с которой вы сталкиваетесь, заключается в том, что щелчок на кнопке также является щелчком по области, в которой вы хотите, чтобы всплывающее окно исчезло, если оно уже показано.Поскольку пузырь событий, щелчок на кнопке заставит всплывающее окно появляться, а затем щелчок документа (который срабатывает после этого из-за барботажа) заставит всплывающее окно сразу же исчезнуть.

Чтобы решить эту проблему, вы должны остановить клик на кнопке от пузырьков до остальной части документа. Вы можете сделать это с:

event.stopPropagation(); 

Итак, что вам нужно сделать, это убедиться в том, что при нажатии на кнопку, событие щелчка не пузырь до документа, где вы уже создали щелчок обработчик событий, который делает всплывал уйти:

$(document).on('click', function(event) { 
    // We want to hide the pop up, but not if you click on 
    // the pop up itself - - anywhere else, but not the pop up 
    if(event.target.id !== "pop-up"){ 
     $('#pop-up').hide(); 
    } 
}); 

Смотрите эту скрипку для рабочей версии: https://jsfiddle.net/0ajpd9go/8/

Answer 2

Если вы хотите, чтобы ваш ДИВ просто появиться на экране изменения этой строки:

jQuery('#pop-up').toggle('fast'); 

к этому:

jQuery('#pop-up').show(); 

Может быть, вы хотели бы, чтобы дать Bootstrap Модальные попробовать: http://getbootstrap.com/javascript/#modals

Answer 3

Я думаю, что вы ищете $.fn.toggle();
$.fn.toggle(); переключает видимость элемента, означающего, что элемент видимый, тогда он будет скрыт при переключении, и если элемент будет скрыт, он будет отображаться при переключении.

Вот основной (анимация бесплатно) Пример использования тумблера:

$(".button-that-toggles").on("click", function() { 
    $(".div-to-toggle").toggle(); 
}); 

Ваше окно переключается с «расширяющейся анимацией», потому что вы использовали $.fn.slideToggle();

Есть три стандартные способов переключаться с помощью JQuery (переключение, fadeToggle и slideToggle)

Ниже приведен пример переключения элемента с помощью $.fn.fadeToggle();:

$(".button-that-toggles").on("click", function() { 
    // NOTE: 250 represents the duration of the animation, meaning that the animation will last 250 milliseconds. 
    $(".div-to-toggle").fadeToggle(250); 
}); 

Вот пример переключая элемента с помощью $.fn.slideToggle();:

$(".button-that-toggles").on("click", function() { 
    // NOTE: 250 represents the duration of the animation, meaning that the animation will last 250 milliseconds. 
    $(".div-to-toggle").slideToggle(250); 
}); 

Также здесь приведен пример того, как можно скрыть DIV, нажав в любом месте на странице:

// listen for a click anywhere in the page 
$(document).on("click", function(event) { 
    // make sure the element that was clicked is not your div 
    if(!$(event.target).is(".your-div")) { 
    // you can now hide your div 
    $(".your-div").hide(); 
    } 
}); 

Также, пожалуйста, помните, что jQuery - это JavaScript на самом деле jQuery - это библиотека , написанная на JavaScript.