码迷,mamicode.com
首页 > 其他好文 > 详细

点击按钮显示隐藏DIV,点击DIV外面隐藏DIV

时间:2017-04-24 15:26:47      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:show   his   event   stop   value   body   按钮   text   ext   

点击按钮显示隐藏DIV,点击DIV外面隐藏DIV

注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡

<style type="text/css">
        body
        {
        background-color:#999999;
        }
         
        #myDiv
        {
        background-color:#FFFFFF;
        width:250px;
        height:250px;
        display:none;
      }
</style>
<body>
<input id="btn" type="button" value="显示DIV" />
 
<div id="myDiv">
This is a div;
</div>
<script type="text/javascript">
    var myDiv = $("#myDiv");
        $(function (){
                $("#btn").click(function (event){
                    if($(myDiv).is(":hidden")){
                        showDiv();//调用显示DIV方法
                        $(document).on("click", function () {//对document绑定一个影藏Div方法
                            $(myDiv).hide();
                        });
                        event.stopPropagation();//阻止事件向上冒泡
                    }else{
                        $(myDiv).hide();
                    }
                    
                });
                
                $(myDiv).click(function (event) 
                {
                    event.stopPropagation();//阻止事件向上冒泡
                });
            });
        function showDiv(){
            $(myDiv).slideDown("300");
        }
</script>
</body>

 

点击按钮显示隐藏DIV,点击DIV外面隐藏DIV

标签:show   his   event   stop   value   body   按钮   text   ext   

原文地址:http://www.cnblogs.com/LChenglong/p/6756749.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!