Question

我想要 1. Show and hide a div when I click on the div.
2. Hide Div when click out side div.
这是我的代码
HTML

<div id="div_1">Click me</div>
<div id="div_2">Show hide text</div>

CSS

#div_2{
    display:none;
    border:1px solid black
}
#div_1{
    border:1px solid black;
    }

SCRIPT

$('#div_1').on('click', function () {
    $("#div_2").fadeToggle("fast");
});
$('html').on('mouseup', function (e) {
    $("#div_2").fadeOut("fast");
    e.stopPropagation();
});

这是DEMO
的问题
当我点击div显示时，它不起作用，在div之外再隐藏然后再显示div。

Answer 1

$('#div_1').on('click', function () {
    $("#div_2").stop().fadeToggle("fast");
});
$('html').on('mouseup', function () {
    $("#div_2").stop().fadeOut("fast");
});

使用.stop()清除动画队列，防止淡入淡出两次运行。

http://api.jquery.com/stop/

JSFiddle： http://jsfiddle.net/59os3yeq/3/

Answer 2

您需要阻止mouseup事件从点击的div元素传播到html元素：

$('#div_1').on('click', function () {
    $("#div_2").fadeToggle("fast");
}).on('mouseup', function (e) {;
    e.stopPropagation();
});
$('html').on('mouseup', function () {
    $("#div_2").fadeOut("fast");
});

JSFiddle：http://jsfiddle.net/TrueBlueAussie/59os3yeq/1/

单击显示/隐藏div，隐藏div外部div

2 个答案: