求助大神js 点击显示下拉菜单，点击空白处隐藏

zlchristian 2017-09-05 04:58:33
如题，就是在这个代码的基础上点击菜单以外的区域使菜单隐藏，其他效果不变，谢谢
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>

*{margin: 0; padding: 0; border:0 none; font-size: 16px; font-family:'segoe UI';color: #353535; font-weight:normal;color:#262626;}

h1{}

li{list-style: none;}

a{text-decoration: none; cursor: pointer;color:#3482c3;}

.clear{clear: both;}

body{ min-width:960px;}

.mainbody{padding:0 5%;}

.mainbody2{padding:0 6%;}

.mainbody2 table td{ vertical-align:top;}

.logo{padding:0px 0;}

.logo ul{}

.logo ul li{float:left; margin-right:0px; height:45px; position:relative;}

.logo ul li a{display:block; color:#262626; line-height:45px;padding:0px 26px;  }

.logo ul li h1{display:block; color:#262626; line-height:45px;border:1px solid white; border-bottom:0 none; position:relative; z-index:8;background:url(images/arrow-down.png) no-repeat 74px 22px ; padding:0 40px 0 26px; cursor:pointer;}

.logo ul li .subnav{background-color:#f2f2f2; border-color:#e6e6e6;}

.logo ul li h1:hover{text-decoration:underline;}

.logo ul li a:hover{ text-decoration:underline;}

.logo ul .navdown a{ }

.signbox{ overflow:hidden; padding:5px 0;}

.search{width:274px; border:1px solid #0067b8; height:34px; float:left;}

.search input{float:left;}

.searchL{width:230px;padding:5px 0 5px 10px;}

.searchR{width:34px; height:34px; background:url(images/sbtn.png) no-repeat;}

.sign{float:right;}

.sign a{color:#262626;display:block; line-height:34px;}

.sign a:hover{color:#3467c3;}

#NO0{border:1px solid #e6e6e6; position:absolute; top:45px;left:0; z-index:7; border-bottom:2px solid #262626; background:#f2f2f2;}

#NO0 a{ text-decoration:none; display:block;}

#NO0 .subnav2{background:url(images/arrow-down2.png) no-repeat 270px 21px; }

#NO0 a:hover{background-color:#e6e6e6; text-decoration:none; border:0 none;}

#NO1{border:1px solid #e6e6e6; position:absolute; top:45px;left:0; z-index:5; border-bottom:2px solid #262626; background:#f2f2f2;}

#NO1 a{ text-decoration:none;}

#NO1 .subnav2{background:url(images/arrow-down2.png) no-repeat 270px 21px; }

#NO1 a:hover{background-color:#e6e6e6; text-decoration:none; border:0 none;}

#NO1 .TabContent table td a:hover{ background:#d9d9d9;}

#NO2{position:absolute; top:50px;left:0; z-index:5;  background:#006cc2;}

#NO2 a{}



#NO2 a:hover{background-color:#0060ac; text-decoration:underline; }

#NO2 .TabContent table td a:hover{ background:#d9d9d9;}

#NO3{position:absolute; top:50px;left:0; z-index:5;  background:#006cc2;}

#NO3 a{}



#NO3 a:hover{background-color:#0060ac; text-decoration:underline; }

#NO3 .TabContent table td a:hover{ background:#d9d9d9;}

.TabContent{ position:absolute; top:-1px;left:298px; z-index:22;}

.TabContent table{ background:#e6e6e6;border:1px solid #d9d9d9; border-bottom:2px solid #262626;}

.TabContent table td a{display:block;color:#262626; line-height:45px;padding:0px 26px;  width:246px; }

#NO0 .TabContent table td a:hover{ background:#d9d9d9;}

.no{ display:none;}





</style>

<script language="JavaScript">

        <!--//

        function ShowMenu(obj, noid) {

            var block = document.getElementById(noid);

            var n = noid.substr(noid.length - 1);

            if (noid.length == 4) {

                var ul = document.getElementById(noid.substring(0, 3)).getElementsByTagName("ul");

                var h2 = document.getElementById(noid.substring(0, 3)).getElementsByTagName("h2");

                for (var i = 0; i < h2.length; i++) {

                    h2[i].innerHTML = h2[i].innerHTML.replace("+", "-");

                    h2[i].style.color = "";

                }

                obj.style.color = "#FF0000";

                for (var i = 0; i < ul.length; i++) {

                    if (i != n) {

                        ul[i].className = "no";

                    }

                }

            } else {

                var span = document.getElementById("menu").getElementsByTagName("span");

                var h1 = document.getElementById("menu").getElementsByTagName("h1");

				var aa = document.getElementById("menu").getElementsByTagName("a");

                for (var i = 0; i < h1.length; i++) {

                    h1[i].className = "noclass";

                }

                obj.className = "subnav";

				

                for (var i = 0; i < span.length; i++) {

                    if (i != n) {

                        span[i].className = "no";

						

                    }

                }

            }

            if (block.className == "no") {

                block.className = "";

                obj.innerHTML = obj.innerHTML.replace("-", "+");

				

            } else {

                block.className = "no";

                obj.className = "";

				

            }

        }

         //-->

    </script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



<title>无标题文档</title>

</head>



<body>

<div id="menu" class="header">

    <div class="mainbody">

        <table width="100%" cellpadding="0" cellspacing="0">

            <tr>

                <td width="75%">

                    <div class="">

                        <div class="logo">

                            <ul>

                                <li style="padding:5px 18px;">

                                <img src="images/logo.png" height="32" />

                                </li>

                                <li class="navdown" >

                                    <h1 onClick="javascript:ShowMenu(this,'NO0')" class="noclass">Store</h1>

                                    <span id="NO0" class="no">

                                        <div class="TabTitle"> 

                                            <table  width="298"  cellpadding="0" cellspacing="0">

                                                <tr><td style="position:relative;">

                                                    <a>Store Home</a>

                                                    </td>

                                                </tr>

                                                <tr><td><a onmouseover="hidnav.style.display='block'" onmouseout="hidnav.style.display='none'" class="subnav2">Devices</a> </td></tr>

                                                <tr><td><a onmouseover="hidnav1.style.display='block'" onmouseout="hidnav1.style.display='none'" class="subnav2">Devices</a> </td></tr>

                                                <tr><td><a onmouseover="hidnav2.style.display='block'" onmouseout="hidnav2.style.display='none'" class="subnav2">Devices</a> </td></tr>

                                                <tr><td><a onmouseover="hidnav3.style.display='block'" onmouseout="hidnav3.style.display='none'" class="subnav2">Devices</a> </td></tr>

                                                <tr><td><a onmouseover="hidnav4.style.display='block'" onmouseout="hidnav4.style.display='none'" class="subnav2">Devices</a> </td></tr>

                                            </table>

                                        </div>

                                        

                                    </span>

                                </li>

                                <li class="navdown">

                                    <h1 style="background-position:98px 22px; position:relative; z-index:6;"onClick="javascript:ShowMenu(this,'NO1')" class="noclass">Products</h1>

                                    <span id="NO1" class="no">

                                        <div class="TabTitle"> 

                                            <table  width="298"  cellpadding="0" cellspacing="0">

                                                <tr><td><a onmouseover="hidnav5.style.display='block'" onmouseout="hidnav5.style.display='none'" class="subnav2">Software & Service</a> </td></tr>

                                                <tr><td><a onmouseover="hidnav6.style.display='block'" onmouseout="hidnav6.style.display='none'" class="subnav2">Devices & Xbox</a> </td></tr>

                                                <tr><td><a onmouseover="hidnav7.style.display='block'" onmouseout="hidnav7.style.display='none'" class="subnav2">For Business</a> </td></tr>

                                                <tr><td><a onmouseover="hidnav8.style.display='block'" onmouseout="hidnav8.style.display='none'" class="subnav2">Devices</a> </td></tr>

                                                <tr><td><a onmouseover="hidnav9.style.display='block'" onmouseout="hidnav9.style.display='none'" class="subnav2">Devices</a> </td></tr>

                                            </table>

                                        </div>

                                        

                                    </span>

                                </li>

                                <li>

                                    <a style="border:1px solid white;border-bottom:0 none;">Support</a>

                                </li>

                            </ul>

                        </div>

                    </div>

                </td>

                <td width="25%">

                    

                </td>

            </tr>

        </table>

    </div>

    

</div>

</body>

</html>

...全文
1116 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
Go 旅城通票 2017-09-06
  • 打赏
  • 举报
 回复
引用 11 楼 zlchristian 的回复:
这下完美了，非常感谢大神，太厉害了
记得结贴
zlchristian 2017-09-06
  • 打赏
  • 举报
 回复
引用 10 楼 showbo 的回复:
[quote=引用 6 楼 zlchristian 的回复:] [quote=引用 2 楼 showbo 的回复:] var nowid,h1 document.onclick = function (e) { var o = e.target || e.srcElement; if (o.tagName != 'H1' && h1) { h1.click(h1, nowid) h1 = null; } } function ShowMenu(obj, noid) { window.h1 = obj; nowid = noid; var block = document.getElementById(noid); var n = noid.substr(noid.length - 1); ................ Web开发学习资料推荐 jqGrid导航Navigator配置 JSONP跨域访问在线代理
非常感谢，唯一一点就是点击菜单本身菜单也会隐藏，当然效果影响不大。[/quote] 点击菜单不隐藏你判断下是否点击菜单就行了 
    var nowid, h1
    function isSubMenu(o) {
        do { console.log(o.id); if(o.id==nowid)return  true; } while (o= o.parentNode);
        return false;
    }
    document.onclick = function (e) {
        var o = e.target || e.srcElement;
        if (o.tagName != 'H1' && h1 && !isSubMenu(o)) { h1.click(h1, nowid); h1 = null; }
    }
[/quote] 这下完美了，非常感谢大神，太厉害了
Go 旅城通票 2017-09-06
  • 打赏
  • 举报
 回复
引用 6 楼 zlchristian 的回复:
[quote=引用 2 楼 showbo 的回复:] var nowid,h1 document.onclick = function (e) { var o = e.target || e.srcElement; if (o.tagName != 'H1' && h1) { h1.click(h1, nowid) h1 = null; } } function ShowMenu(obj, noid) { window.h1 = obj; nowid = noid; var block = document.getElementById(noid); var n = noid.substr(noid.length - 1); ................ Web开发学习资料推荐 jqGrid导航Navigator配置 JSONP跨域访问在线代理
非常感谢，唯一一点就是点击菜单本身菜单也会隐藏，当然效果影响不大。[/quote] 点击菜单不隐藏你判断下是否点击菜单就行了 
    var nowid, h1
    function isSubMenu(o) {
        do { console.log(o.id); if(o.id==nowid)return  true; } while (o= o.parentNode);
        return false;
    }
    document.onclick = function (e) {
        var o = e.target || e.srcElement;
        if (o.tagName != 'H1' && h1 && !isSubMenu(o)) { h1.click(h1, nowid); h1 = null; }
    }
zlchristian 2017-09-06
  • 打赏
  • 举报
 回复
引用 8 楼 functionsub 的回复:
        function ShowMenu(obj, noid) {
            var block = document.getElementById(noid);
            var n = noid.substr(noid.length - 1);
            if (noid.length == 4) {
                var ul = document.getElementById(noid.substring(0, 3)).getElementsByTagName("ul");
                var h2 = document.getElementById(noid.substring(0, 3)).getElementsByTagName("h2");
                for (var i = 0; i < h2.length; i++) {
                    h2[i].innerHTML = h2[i].innerHTML.replace("+", "-");
                    h2[i].style.color = "";
                }
                obj.style.color = "#FF0000";
                for (var i = 0; i < ul.length; i++) {
                    if (i != n) {
                        ul[i].className = "no";
                    }
                }
            } else {
                var span = document.getElementById("menu").getElementsByTagName("span");
                var h1 = document.getElementById("menu").getElementsByTagName("h1");
                var aa = document.getElementById("menu").getElementsByTagName("a");
                for (var i = 0; i < h1.length; i++) {
                    h1[i].className = "noclass";
                }
                obj.className = "subnav";
                 
                for (var i = 0; i < span.length; i++) {
                    if (i != n) {
                        span[i].className = "no";
                    }else{
                        span[i].className = "";
                    }
                }
            }
        }
        window.onload = function(){
            var body = document.getElementsByTagName('body')[0];
            document.onclick = function(e){
                e = e || window.event;
                var target = e.target || e.srcElement;
                var tables = document.getElementsByClassName('TabTitle');
                if(target.className != 'noclass' && target.className != 'subnav'){
                    var clickInSubNav = false;
                    for(var i=0;i<tables.length;i++){
                        if(!isInParent(target , tables[i].parentNode)){
                            tables[i].parentNode.className = 'no';
                        }else{
                            clickInSubNav = true;
                        }
                    }
                    if(!clickInSubNav){
                        var subnav = document.getElementsByClassName('subnav');
                        for(var i=0;i<subnav.length;i++){
                            subnav[i].className = 'noclass';
                        }
                    }
                }
            }
            function isInParent(dom,parent){
                var isIn = false;
                var _p;
                while((dom = dom.parentNode) && dom.nodeType != 9){
                    if(dom == parent){
                        isIn = true;
                        break;
                    }
                }
                return isIn;
            }
        }
点击菜单隐藏是你本身代码的问题。
好吧，怪我没说清楚，我的意思是点击下拉菜单的时候会隐藏，想要的效果是点击下拉菜单本身并不隐藏，点击导航栏的时候隐藏下拉菜单效果确实是本来就有的
functionsub 2017-09-06
  • 打赏
  • 举报
 回复 
        function ShowMenu(obj, noid) {
            var block = document.getElementById(noid);
            var n = noid.substr(noid.length - 1);
            if (noid.length == 4) {
                var ul = document.getElementById(noid.substring(0, 3)).getElementsByTagName("ul");
                var h2 = document.getElementById(noid.substring(0, 3)).getElementsByTagName("h2");
                for (var i = 0; i < h2.length; i++) {
                    h2[i].innerHTML = h2[i].innerHTML.replace("+", "-");
                    h2[i].style.color = "";
                }
                obj.style.color = "#FF0000";
                for (var i = 0; i < ul.length; i++) {
                    if (i != n) {
                        ul[i].className = "no";
                    }
                }
            } else {
                var span = document.getElementById("menu").getElementsByTagName("span");
                var h1 = document.getElementById("menu").getElementsByTagName("h1");
                var aa = document.getElementById("menu").getElementsByTagName("a");
                for (var i = 0; i < h1.length; i++) {
                    h1[i].className = "noclass";
                }
                obj.className = "subnav";
                 
                for (var i = 0; i < span.length; i++) {
                    if (i != n) {
                        span[i].className = "no";
                    }else{
                        span[i].className = "";
                    }
                }
            }
        }
        window.onload = function(){
            var body = document.getElementsByTagName('body')[0];
            document.onclick = function(e){
                e = e || window.event;
                var target = e.target || e.srcElement;
                var tables = document.getElementsByClassName('TabTitle');
                if(target.className != 'noclass' && target.className != 'subnav'){
                    var clickInSubNav = false;
                    for(var i=0;i<tables.length;i++){
                        if(!isInParent(target , tables[i].parentNode)){
                            tables[i].parentNode.className = 'no';
                        }else{
                            clickInSubNav = true;
                        }
                    }
                    if(!clickInSubNav){
                        var subnav = document.getElementsByClassName('subnav');
                        for(var i=0;i<subnav.length;i++){
                            subnav[i].className = 'noclass';
                        }
                    }
                }
            }
            function isInParent(dom,parent){
                var isIn = false;
                var _p;
                while((dom = dom.parentNode) && dom.nodeType != 9){
                    if(dom == parent){
                        isIn = true;
                        break;
                    }
                }
                return isIn;
            }
        }
点击菜单隐藏是你本身代码的问题。
zlchristian 2017-09-06
  • 打赏
  • 举报
 回复
引用 4 楼 MOONCOM 的回复:
作了如下修改 js中， ShowMenu(obj, noid,e)，比原来多个参数e，该方法的底部加了e.stopPropagation(); 添加了一个自己的方法 HTML中 变为<h1 onClick="javascript:ShowMenu(this,'NO0',event)" class="noclass">Store</h1> 比原来多了个event参数。
非常感谢，你这个和2楼给出的方法的效果是一样的，点击菜单本身也会使菜单隐藏。
zlchristian 2017-09-06
  • 打赏
  • 举报
 回复
引用 2 楼 showbo 的回复:
var nowid,h1 document.onclick = function (e) { var o = e.target || e.srcElement; if (o.tagName != 'H1' && h1) { h1.click(h1, nowid) h1 = null; } } function ShowMenu(obj, noid) { window.h1 = obj; nowid = noid; var block = document.getElementById(noid); var n = noid.substr(noid.length - 1); ................ Web开发学习资料推荐 jqGrid导航Navigator配置 JSONP跨域访问在线代理
非常感谢，唯一一点就是点击菜单本身菜单也会隐藏，当然效果影响不大。
zlchristian 2017-09-06
  • 打赏
  • 举报
 回复
引用 1 楼 functionsub 的回复:
        window.onload = function(){
            var body = document.getElementsByTagName('body')[0];
            body.onclick = function(e){
                e = e || window.event;
                var target = e.target || e.srcElement;
                var tables = document.getElementsByClassName('TabTitle');
                if(target.className != 'noclass' && target.className != 'subnav'){
                    for(var i=0;i<tables.length;i++){
                        tables[i].parentNode.className = 'no';
                    }
                    var subnav = document.getElementsByClassName('subnav');
                    for(var i=0;i<subnav.length;i++){
                        subnav[i].className = 'noclass';
                    }
                }
            }
        }
你好，首先感谢你的帮助，但是这段代码添加上点击空白处依然不会隐藏，点击菜单本身反而隐藏了
霜月枫桥 2017-09-05
  • 打赏
  • 举报
 回复
作了如下修改 js中， ShowMenu(obj, noid,e)，比原来多个参数e，该方法的底部加了e.stopPropagation(); 添加了一个自己的方法 HTML中 变为<h1 onClick="javascript:ShowMenu(this,'NO0',event)" class="noclass">Store</h1> 比原来多了个event参数。
霜月枫桥 2017-09-05
  • 打赏
  • 举报
 回复
修改后的代码如下 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
*{margin: 0; padding: 0; border:0 none; font-size: 16px; font-family:'segoe UI';color: #353535; font-weight:normal;color:#262626;}
h1{}
li{list-style: none;}
a{text-decoration: none; cursor: pointer;color:#3482c3;}
.clear{clear: both;}
body{ min-width:960px;}
.mainbody{padding:0 5%;}
.mainbody2{padding:0 6%;}
.mainbody2 table td{ vertical-align:top;}
.logo{padding:0px 0;}
.logo ul{}
.logo ul li{float:left; margin-right:0px; height:45px; position:relative;}
.logo ul li a{display:block; color:#262626; line-height:45px;padding:0px 26px;  }
.logo ul li h1{display:block; color:#262626; line-height:45px;border:1px solid white; border-bottom:0 none; position:relative; z-index:8;background:url(images/arrow-down.png) no-repeat 74px 22px ; padding:0 40px 0 26px; cursor:pointer;}
.logo ul li .subnav{background-color:#f2f2f2; border-color:#e6e6e6;}
.logo ul li h1:hover{text-decoration:underline;}
.logo ul li a:hover{ text-decoration:underline;}
.logo ul .navdown a{ }
.signbox{ overflow:hidden; padding:5px 0;}
.search{width:274px; border:1px solid #0067b8; height:34px; float:left;}
.search input{float:left;}
.searchL{width:230px;padding:5px 0 5px 10px;}
.searchR{width:34px; height:34px; background:url(images/sbtn.png) no-repeat;}
.sign{float:right;}
.sign a{color:#262626;display:block; line-height:34px;}
.sign a:hover{color:#3467c3;}
#NO0{border:1px solid #e6e6e6; position:absolute; top:45px;left:0; z-index:7; border-bottom:2px solid #262626; background:#f2f2f2;}
#NO0 a{ text-decoration:none; display:block;}
#NO0 .subnav2{background:url(images/arrow-down2.png) no-repeat 270px 21px; }
#NO0 a:hover{background-color:#e6e6e6; text-decoration:none; border:0 none;}
#NO1{border:1px solid #e6e6e6; position:absolute; top:45px;left:0; z-index:5; border-bottom:2px solid #262626; background:#f2f2f2;}
#NO1 a{ text-decoration:none;}
#NO1 .subnav2{background:url(images/arrow-down2.png) no-repeat 270px 21px; }
#NO1 a:hover{background-color:#e6e6e6; text-decoration:none; border:0 none;}
#NO1 .TabContent table td a:hover{ background:#d9d9d9;}
#NO2{position:absolute; top:50px;left:0; z-index:5;  background:#006cc2;}
#NO2 a{}
 
#NO2 a:hover{background-color:#0060ac; text-decoration:underline; }
#NO2 .TabContent table td a:hover{ background:#d9d9d9;}
#NO3{position:absolute; top:50px;left:0; z-index:5;  background:#006cc2;}
#NO3 a{}
 
#NO3 a:hover{background-color:#0060ac; text-decoration:underline; }
#NO3 .TabContent table td a:hover{ background:#d9d9d9;}
.TabContent{ position:absolute; top:-1px;left:298px; z-index:22;}
.TabContent table{ background:#e6e6e6;border:1px solid #d9d9d9; border-bottom:2px solid #262626;}
.TabContent table td a{display:block;color:#262626; line-height:45px;padding:0px 26px;  width:246px; }
#NO0 .TabContent table td a:hover{ background:#d9d9d9;}
.no{ display:none;}
 
 
</style>
<script language="JavaScript">
        <!--//
        function ShowMenu(obj, noid,e) {

            var block = document.getElementById(noid);
            var n = noid.substr(noid.length - 1);
            if (noid.length == 4) {
                var ul = document.getElementById(noid.substring(0, 3)).getElementsByTagName("ul");
                var h2 = document.getElementById(noid.substring(0, 3)).getElementsByTagName("h2");
                for (var i = 0; i < h2.length; i++) {
                    h2[i].innerHTML = h2[i].innerHTML.replace("+", "-");
                    h2[i].style.color = "";
                }
                obj.style.color = "#FF0000";
                for (var i = 0; i < ul.length; i++) {
                    if (i != n) {
                        ul[i].className = "no";
                    }
                }
            } else {
                var span = document.getElementById("menu").getElementsByTagName("span");
                var h1 = document.getElementById("menu").getElementsByTagName("h1");
                var aa = document.getElementById("menu").getElementsByTagName("a");
                for (var i = 0; i < h1.length; i++) {
                    h1[i].className = "noclass";
                }
                obj.className = "subnav";
                 
                for (var i = 0; i < span.length; i++) {
                    if (i != n) {
                        span[i].className = "no";
                         
                    }
                }
            }
            if (block.className == "no") {
                block.className = "";
                obj.innerHTML = obj.innerHTML.replace("-", "+");
                 
            } else {
                block.className = "no";
                obj.className = "";
                 
            }
            e.stopPropagation();
        }
         //-->
         window.onclick=function(){
            var navArr=document.getElementsByClassName('navdown');
            var navArrLength=navArr.length;
            for(var i=0;i<navArrLength;i++){
                navArr[i].children[0].setAttribute('class','noclass');
                navArr[i].children[1].setAttribute('class','no');
            }
         }
    </script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>无标题文档</title>
</head>
 
<body>
<div id="menu" class="header">
    <div class="mainbody">
        <table width="100%" cellpadding="0" cellspacing="0">
            <tr>
                <td width="75%">
                    <div class="">
                        <div class="logo">
                            <ul>
                                <li style="padding:5px 18px;">
                                <img src="images/logo.png" height="32" />
                                </li>
                                <li class="navdown" >
                                    <h1 onClick="javascript:ShowMenu(this,'NO0',event)" class="noclass">Store</h1>
                                    <span id="NO0" class="no">
                                        <div class="TabTitle"> 
                                            <table  width="298"  cellpadding="0" cellspacing="0">
                                                <tr><td style="position:relative;">
                                                    <a>Store Home</a>
                                                    </td>
                                                </tr>
                                                <tr><td><a onmouseover="hidnav.style.display='block'" onmouseout="hidnav.style.display='none'" class="subnav2">Devices</a> </td></tr>
                                                <tr><td><a onmouseover="hidnav1.style.display='block'" onmouseout="hidnav1.style.display='none'" class="subnav2">Devices</a> </td></tr>
                                                <tr><td><a onmouseover="hidnav2.style.display='block'" onmouseout="hidnav2.style.display='none'" class="subnav2">Devices</a> </td></tr>
                                                <tr><td><a onmouseover="hidnav3.style.display='block'" onmouseout="hidnav3.style.display='none'" class="subnav2">Devices</a> </td></tr>
                                                <tr><td><a onmouseover="hidnav4.style.display='block'" onmouseout="hidnav4.style.display='none'" class="subnav2">Devices</a> </td></tr>
                                            </table>
                                        </div>
                                         
                                    </span>
                                </li>
                                <li class="navdown">
                                    <h1 style="background-position:98px 22px; position:relative; z-index:6;"onClick="javascript:ShowMenu(this,'NO1',event)" class="noclass">Products</h1>
                                    <span id="NO1" class="no">
                                        <div class="TabTitle"> 
                                            <table  width="298"  cellpadding="0" cellspacing="0">
                                                <tr><td><a onmouseover="hidnav5.style.display='block'" onmouseout="hidnav5.style.display='none'" class="subnav2">Software & Service</a> </td></tr>
                                                <tr><td><a onmouseover="hidnav6.style.display='block'" onmouseout="hidnav6.style.display='none'" class="subnav2">Devices & Xbox</a> </td></tr>
                                                <tr><td><a onmouseover="hidnav7.style.display='block'" onmouseout="hidnav7.style.display='none'" class="subnav2">For Business</a> </td></tr>
                                                <tr><td><a onmouseover="hidnav8.style.display='block'" onmouseout="hidnav8.style.display='none'" class="subnav2">Devices</a> </td></tr>
                                                <tr><td><a onmouseover="hidnav9.style.display='block'" onmouseout="hidnav9.style.display='none'" class="subnav2">Devices</a> </td></tr>
                                            </table>
                                        </div>
                                         
                                    </span>
                                </li>
                                <li>
                                    <a style="border:1px solid white;border-bottom:0 none;">Support</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </td>
                <td width="25%">
                     
                </td>
            </tr>
        </table>
    </div>
     
</div>
<div id="aaa"></div>
<script>
    function ma(){
        document.getElementById('aaa').setAttribute('class','bbb');
    }
    ma();
</script>
</body>
</html>
Go 旅城通票 2017-09-05
  • 打赏
  • 举报
 回复
var nowid,h1 document.onclick = function (e) { var o = e.target || e.srcElement; if (o.tagName != 'H1' && h1) { h1.click(h1, nowid) h1 = null; } } function ShowMenu(obj, noid) { window.h1 = obj; nowid = noid; var block = document.getElementById(noid); var n = noid.substr(noid.length - 1); ................

Web开发学习资料推荐
jqGrid导航Navigator配置
JSONP跨域访问在线代理
functionsub 2017-09-05
  • 打赏
  • 举报
 回复 
        window.onload = function(){
            var body = document.getElementsByTagName('body')[0];
            body.onclick = function(e){
                e = e || window.event;
                var target = e.target || e.srcElement;
                var tables = document.getElementsByClassName('TabTitle');
                if(target.className != 'noclass' && target.className != 'subnav'){
                    for(var i=0;i<tables.length;i++){
                        tables[i].parentNode.className = 'no';
                    }
                    var subnav = document.getElementsByClassName('subnav');
                    for(var i=0;i<subnav.length;i++){
                        subnav[i].className = 'noclass';
                    }
                }
            }
        }
Android 开发即时聊天工具 YQ (更新)
Android 开发即时聊天工具 YQ ,仿QQ，实现网络即时聊天。
ViewPager+Fragment基本使用
ViewPager+Fragment基本使用,设计出更加灵活的界面风格
JavaScript大神之路
从0开始学习JavaScript，从入门到进阶编程，掌握js开发技能，轻松应对web开发、微信小程序开发。 模式：案例讲解+实战+深层次原理绘图讲解 附带价值：讲解编程语言背后的内存原理及逻辑，理解之后其他编程语言通用
分别用html/css、javascript、jQuery实现下拉菜单的显示和隐藏
一、html/css实现下拉菜单的显示和隐藏 简单来说就是通过对css样式的控制来实现下拉菜单的显示和隐藏 具体代码示例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...
el-dropdown 下拉菜单 结合JQ做鼠标移入显示 移出隐藏事件
鼠标移入显示下拉菜单按钮,移出隐藏下拉菜单按钮功能实现
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章