首页 新闻 会员 周边 捐助

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事件隐藏了,怎么解决?实现我这样的效果

骑着蜗牛耍流氓的主页 骑着蜗牛耍流氓 | 初学一级 | 园豆:135
提问于:2014-08-21 15:48
< >
分享
最佳答案
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
释迦苦僧 | 菜鸟二级 |园豆:238 | 2014-08-21 16:26
其他回答(2)
0

其实你可以不适用fadein和fadeout的 toggle

toggle() 方法如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

$(function () {

$("button").click(function () { $("div").toggle(300); });

})

如果还不行说话

收获园豆:2
太笼统 | 园豆:4 (初学一级) | 2014-08-21 16:00

 你这效果点击按钮是谈的出来,但是我还需要点击弹出层以外的界面时把DIV层隐藏了

支持(0) 反对(0) 骑着蜗牛耍流氓 | 园豆:135 (初学一级) | 2014-08-21 16:27

感谢

支持(0) 反对(0) 骑着蜗牛耍流氓 | 园豆:135 (初学一级) | 2014-08-21 16:39
0

楼上的思路也可以!

 

根据点击的对象 也就是$("button") 

$(document) 根据这个 在里面用this去查找 $("div")

 

比如:

$("button").click(function () {

$(this).xxxxx 找到 $("div")

 

});

或者在加个e更加这个e来判断 

$("button").click(function (e) {

xxx

 

});

收获园豆:2
s_p | 园豆:140 (初学一级) | 2014-08-21 16:04

谢谢 用了3L的办法可以了

支持(0) 反对(0) 骑着蜗牛耍流氓 | 园豆:135 (初学一级) | 2014-08-21 16:39
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册