jquery 点击按钮弹出层问题
0
悬赏园豆：10
[已解决问题]
解决于 2014-08-21 16:40
做一个效果如下：
一个button按钮，当我点击button后弹出DIV层，
当我点击DIV层以外的地方时候把DIV隐藏
大概代码如下：
$(function () {
$("button").click(function () {
$("div").fadeIn(300);
});
$(document).click(function () {
$("div").fadeOut(300);
});
});
问题来了:当我点击按钮的时候它触发了自己的事件把DIV显示了,但是又触发了document的click事件隐藏了，怎么解决？实现我这样的效果
最佳答案
0
<input type="button" id="js_button" /> <div id="js_div" style="width: 100px; height: 100px; background-color: Red; display: none"> </div> <script type="text/javascript"> $(document).ready( function () { $("#js_button").click(function (e) { $("#js_div").show(300); /*阻止冒泡事件*/ e = window.event || e; if (e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; } }); $("#js_div").click(function (e) { /*阻止冒泡事件*/ e = window.event || e; if (e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; } }); $(document).click(function () { $("#js_div").hide(300); }); } ); </script>
收获园豆：6
其他回答(2)
0
其实你可以不适用fadein和fadeout的 toggle
toggle() 方法如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
$(function () {
$("button").click(function () { $("div").toggle(300); });
})
如果还不行说话
收获园豆：2
你这效果点击按钮是谈的出来，但是我还需要点击弹出层以外的界面时把DIV层隐藏了
感谢
0
楼上的思路也可以!
根据点击的对象 也就是$("button")
和
$(document) 根据这个 在里面用this去查找 $("div")
比如：
$("button").click(function () {
$(this).xxxxx 找到 $("div")
});
或者在加个e更加这个e来判断
$("button").click(function (e) {
xxx
});
收获园豆：2
谢谢 用了3L的办法可以了
