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

最新推荐文章于 2023-07-06 14:24:46 发布
最新推荐文章于 2023-07-06 14:24:46 发布
阅读量518 收藏
点赞数
分类专栏： # html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/milijiangjun/article/details/78643459
版权

代码如下：

<!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" οnclick="Show();">
        show</div>
    <div id="nav3" οnclick="hiden();">
        hiden</div>
</body>
</html>


milijiangjun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 控制元素案例点击按钮显示隐藏 div
猿码互联
05-18 428
这样，每次点击按钮时，就会切换内容元素的显示和隐藏状态。方法获取按钮和内容的元素，并将其分别保存在。方法为按钮绑定一个点击事件的监听器。在监听器函数中，通过检查内容元素的。样式属性，如果其值为。
按钮显示和隐藏
04-13
### 按钮显示和隐藏知识点详解 #### 一、知识点概述 在Web开发中，按钮的显示与隐藏是常见的交互需求之一。本知识点主要围绕一个具体的HTML示例来讲解如何通过JavaScript实现按钮的显示与隐藏功能。示例代码通过...
点击按钮（a标签）隐藏显示div内容，切换div内容
08-11
超级实用的点击隐藏，显示div内容，切换div内容 点击按钮（a标签）
点击按钮显示隐藏DIV，点击DIV外面隐藏DIV
anda9128的博客
04-24 216
点击按钮显示隐藏DIV，点击DIV外面隐藏DIV 注意：此方法对touch事件不行，因为stopPropagation并不能阻止touchend的冒泡 <style type="text/css"> body { background-color:#999999; } ...
如何点击按钮显示隐藏div，再点击收起，默认隐藏
kyleCoder的博客
08-29 3856
js代码段： //function show(){ //      var m3hidden=document.getElementByIdx_x_x_x_x('m3hidden'); //     if(m3hidden.style.display==""||m3hidden.style.display=="block"){ //         m3hidden.style.disp
点击button改变div的显示隐藏
Java Farmer
06-10 5795
看着以前自己写的这些小例子，现在看看都有点觉得好笑，是自己以前不懂还是现在已经老了？但是自己还是转存过来了，因为我喜欢。 jquery: $("input[name=add_group]").click(function() { if ($("#add_group_div").css("display") == "none") { $("#add_group_div").s
js点击隐藏和显示div
热门推荐
风云无忌的博客
12-24 2万+
display function hidetext() { var mychar = document.getElementById("con").style.display ="none"; } function showtext() { var mychar = document.getElementBy
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
12-08
如果不是右键点击，我们将div隐藏： ```javascript } else { res.style.display = 'none'; } ``` 总结一下，这个实例展示了如何使用JavaScript处理鼠标右键点击事件，以及如何利用这些事件创建自定义的交互体验。...
jQuery右键点击下拉菜单插件特效代码
03-20
在我们的场景中，jQuery将用于监听鼠标右键点击事件，以及控制下拉菜单的显示与隐藏。 1. **jQuery事件绑定**：要监听右键点击事件，我们可以使用`$(selector).contextmenu()`方法。`contextmenu`事件会在用户尝试...
jQuery右键点击指定区域下拉菜单特效代码
03-20
在CSS中，你需要定义下拉菜单的样式，以便使其在页面上正确地定位和显示。Bootstrap的`show`类可以用来切换下拉菜单的可见性。 ```css .context-menu { display: none; /* 默认隐藏 */ position: absolute; /* ...
给div增加右键菜单功能
09-01
给div层增加右键菜单的功能，是一个很好的demo，帮助改进界面设计
给div层增加右键菜单
05-11
给div层增加右键菜单 效果非常不错 如果有问题请发邮件 454582070@qq.com
点击按钮控制div隐藏和显示
weixin_41595613的博客
11-23 4748
要求：有一个按钮，点击按钮使得div消失，之后将按钮文字改变为显示，再次点击按钮使得div出现，依次类推
原生js与jQuery显示隐藏div的几种方法
jakelihua
02-19 5028
简介：本文将会讲解，如何使用原生的JS和jquery来实现对于这个div盒子的隐藏。
div中添加右键菜单
敬天爱人
09-24 5431
1. div 右键点击此处 2. function function showMenu(){     var evt = window.event || argument[0];     contextMenu.showAt([evt.clientX, evt.clientY]); } 3. menu              //此处以Ext菜单为例，其它框
对div实现右键弹出自定义菜单
Qiustion的专栏
08-24 5315
对div实现右键弹出自定义菜单
vue实现指定div右键显示菜单，并实现复制内容到粘贴板
weixin_42966151的博客
07-06 900
【代码】vue实现指定div右键显示菜单，并实现复制内容到粘贴板。
让div如右键菜单一样聪明
weixin_30641999的博客
07-22 262
先看下面一个命题： 在页面上有一个div，当你用鼠标点击页面时，如果鼠标点在div以内，则不进行任何动作，而如果鼠标点在div以外，则需要让其隐藏。 实际上，这就和右键菜单有点类似，如果你点击右键菜单以外的地方，它就会隐藏起来，如果点击右键菜单的分隔符等不会引起响应的地方，右键菜单则会继续显示。反过来，也就是说，我们用具有这样特性的div可以来模拟右键菜单等的行为。 看到这样命题，也...
点击按钮显示隐藏div
最新发布
09-02
要实现点击按钮显示隐藏div的效果，你可以使用JavaScript来操作DOM元素。以下是一种简单的方式来实现这个功能： 首先，在HTML中创建一个按钮和一个要隐藏的div元素： ```html 点击按钮 <div id="hiddenDiv" style=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值