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

最新推荐文章于 2022-11-23 17:20:59 发布

anda9128

最新推荐文章于 2022-11-23 17:20:59 发布

阅读量240

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/LChenglong/p/6756749.html

版权

点击按钮显示隐藏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>