Question

我尝试使用jQuery切换DIV元素，这个实现的一个很好的例子就是点击Udemy.上的注册按钮

我已经使用jQuery实现了类似的功能，但我确信为了获得我想要的效果，我将不得不使用JavaScript，但它只是因为我没有＃＆＃ 39;不知道如何使用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

如果您希望div显示在屏幕上，请更改此行：

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切换有三种默认方式（toggle，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编写的。

如何切换DIV元素的可见性？

3 个答案: