zoukankan html css js c++ java

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

查看全文

相关阅读:
支付宝接口对接常见问题
 Myeclipse中配置安卓环境
 算法精解概述
 使用Eclipse开始Java编程
 Windows使用SSH管理Ubuntu
大臣的旅费
 剪格子
 波动数列
 买不到的数目
 逆波兰表达式

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