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

Posted 2020-09-13 AiTing on the way

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击按钮显示隐藏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的主要内容，如果未能解决你的问题，请参考以下文章

点击div外面隐藏弹窗

只点击空白处才隐藏div的方法

jquery怎么实现点击一个按钮控制一个div的显示和隐藏

jquery显示隐藏div

React 点击按钮显示div与隐藏div，并给div传children

如何点击隐藏和显示一个div