欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

点击右键和按钮进行显示隐藏div

程序员文章站 2022-03-02 21:13:25
...

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <style type="text/css">
    *{cursor: pointer;}
        #nav
        {
            width: 200px;
            height: 500px;
            background-color: red;
            border: 1px solid red;
        }
        #nav2
        {
            height: 30px;
        }
        #nav3
        {
            height: 30px;
        }
        body{
            width: 100%;
            height: 100%;

        }
    </style>
     <script type="text/javascript" src="jquery-1.12.4.min.js" ></script>
    <script type="text/javascript">
        
        window.onclick = function () {

              var ua =navigator.userAgent.toLowerCase();
                if(/(iPhone|iPad|iPod|iOS)/i.test(ua)){
                    alert("winua");
                    if (/(iPhone)/i.test(navigator.userAgent)) { alert("iPhone-w"); }
                    else if (/(iPad)/i.test(navigator.userAgent)) { alert("iPad-w"); }
                    else if (/(iPod)/i.test(navigator.userAgent)) { alert("iPod-w"); }
                    else if (/(iOS)/i.test(navigator.userAgent)) { alert("iOS-w"); }

                }
                //要隐藏的 div 外点击事件
              //  alert("点击div外侧");
                if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                    // alert(navigator.userAgent);    
                    // window.location.href ="iPhone.html";
                 //   alert("iPhone|iPad|iPod|iOS");
                    if (/(iPhone)/i.test(navigator.userAgent)) { alert("iPhone-w"); }
                    else if (/(iPad)/i.test(navigator.userAgent)) { alert("iPad-w"); }
                    else if (/(iPod)/i.test(navigator.userAgent)) { alert("iPod-w"); }
                    else if (/(iOS)/i.test(navigator.userAgent)) { alert("iOS-w"); }



                } else if (/(Android)/i.test(navigator.userAgent)) {
                    // alert(navigator.userAgent);   
                    // window.location.href ="Android.html";  
                    alert("Android-w");
                } else {
                    // alert(navigator.userAgent);  
                    alert("pc-w");
                    //  window.location.href ="pc.html";  
                };

                var ev = window.event || ev;
                hide('false', ev, 'nav');
            }

$(function($) {
         $(document).delegate("body", "click", function(e) {
    alert(1);
    bodyfu();
});
  });
     function bodyfu() {
            var ua = navigator.userAgent.toLowerCase();
            if (/(iPhone|iPad|iPod|iOS)/i.test(ua)) {
               alert(navigator.userAgent);   
                if (/(iPhone)/i.test(navigator.userAgent)) { alert("iPhone-body"); }
                else if (/(iPad)/i.test(navigator.userAgent)) { alert("iPad-body"); }
                else if (/(iPod)/i.test(navigator.userAgent)) { alert("iPod-body"); }
                else if (/(iOS)/i.test(navigator.userAgent)) { alert("iOS-body"); }

            }else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                    // alert(navigator.userAgent);    
                    // window.location.href ="iPhone.html";
                    alert("iPhone|iPad|iPod|iOS");
                    if (/(iPhone)/i.test(navigator.userAgent)) { alert("iPhone-body"); }
                    else if (/(iPad)/i.test(navigator.userAgent)) { alert("iPad-body"); }
                    else if (/(iPod)/i.test(navigator.userAgent)) { alert("iPod-body"); }
                    else if (/(iOS)/i.test(navigator.userAgent)) { alert("iOS-body"); }



                } else if (/(Android)/i.test(navigator.userAgent)) {
                    // alert(navigator.userAgent);   
                    // window.location.href ="Android.html";  
                    alert("Android.html-body");
                } else {
                    // alert(navigator.userAgent);  
                    alert("pc.html-body");
                    //  window.location.href ="pc.html";  
                };

            var ev = window.event || ev;
            hide('false', ev, 'nav');
        }
        document.onclick = function (ev) {
            var ua = navigator.userAgent.toLowerCase();
            if (/(iPhone|iPad|iPod|iOS)/i.test(ua)) {
               alert(navigator.userAgent);   
                if (/(iPhone)/i.test(navigator.userAgent)) { alert("docua-iPhone"); }
                else if (/(iPad)/i.test(navigator.userAgent)) { alert("docua-iPad"); }
                else if (/(iPod)/i.test(navigator.userAgent)) { alert("docua-iPod"); }
                else if (/(iOS)/i.test(navigator.userAgent)) { alert("docua-iOS"); }

            }else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                    // alert(navigator.userAgent);    
                    // window.location.href ="iPhone.html";
                    alert("iPhone|iPad|iPod|iOS");
                    if (/(iPhone)/i.test(navigator.userAgent)) { alert("iPhone"); }
                    else if (/(iPad)/i.test(navigator.userAgent)) { alert("iPad"); }
                    else if (/(iPod)/i.test(navigator.userAgent)) { alert("iPod"); }
                    else if (/(iOS)/i.test(navigator.userAgent)) { alert("iOS"); }



                } else if (/(Android)/i.test(navigator.userAgent)) {
                    // alert(navigator.userAgent);   
                    // window.location.href ="Android.html";  
                    alert("Android.html");
                } else {
                    // alert(navigator.userAgent);  
                    alert("pc.html");
                    //  window.location.href ="pc.html";  
                };

            var ev = window.event || ev;
            hide('false', ev, 'nav');
        }
        function hide(CheckShow, evt, id) {


            var obj = document.getElementById(id);
            var target = evt.target ? evt.target : evt.srcElement;
            if (CheckShow == "true") {
                //首先排除事件的
                obj.style.display = "block";
                return;
            } else
                if (target.id == "nav2" || target.id == "nav3" || target.id == "anani")
                    return;
                else
                    obj.style.display = "none";
        }
        function Show() {
            hide('true', 0, 'nav');
        }
        function hiden() {
            document.getElementById("nav").style.display = "none";

        }
    </script>
</head>
<body>
    <div id="nav">
    </div>
    <div id="nav2" onclick="Show();">
        show</div>
    <div id="nav3" onclick="hiden();">
        hiden</div>
</body>
</html>

点击右键和按钮进行显示隐藏div

上一篇： 微信小程序——动画：按钮控制view中的动画（向右隐藏向左显示）

下一篇： JavaScript点击按钮隐藏和显示div方法

推荐阅读