返回列表 发帖
QIAOXINGXING

Rank: 4

帖子
241 
积分
431 
技术
24  
捐助
0  
注册时间
2011-9-15 
1楼 跳转到 » 倒序看帖
打印
tT
发表于 2012-3-6 14:45 | 只看该作者

[问题求助] JS+HTML怎样修改鼠标悬停展开菜单？

希望懂 html 和 js 的朋友帮个忙！！
下面的网页源码是我从网上找到的 http://www.csrcode.cn/html/txdm/cddh/3819.htm ，

效果是：鼠标移动到菜单上，菜单会自动展开。
但是鼠标一移动开，菜单也就收回了；

如何修改一下，使得它的效果和xp在任务栏上新建的工具栏一个效果，
也就是：鼠标移动到菜单1上则展开此菜单，然后如果鼠标移动到其他的空白处，不收回菜单1，若单击空白处，则收回菜单1；
如果移动到另一菜单2上，则收回菜单1，展开菜单2.
html 和 js 我完全不懂，多些各位的帮助先
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS+JS打造兼容性很好的三级导航菜单丨芯晴网页特效丨CsrCode.Cn</title>
<style>
.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
 
.suckerdiv ul li{
position: relative;
}
.suckerdiv ul li ul{
left: 149px;
position: absolute;
width: 160px;
top: 0;
display: none;
}
 
.suckerdiv ul li ul li ul{ 
left: 159px; 
}
 
.suckerdiv ul li a{
display: block;
color: black;
text-decoration: none;
font:12px 宋体;
background: #fff;
padding: 5px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
.suckerdiv ul li a:visited{
color: black;
}
.suckerdiv ul li a:hover{
color: white;
background-color: gray;
}
.suckerdiv .subfolderstyle{
background: url(http://www.codefans.net/jscss/demoimg/201201/arrow-list.gif) no-repeat center right;
}
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
</style>
<script type="text/javascript">
var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
    ultags[t].parentNode.onmouseover=function(){
 
    this.getElementsByTagName("ul")[0].style.display="block"
 
    }
    ultags[t].parentNode.onmouseout=function(){
 
    this.getElementsByTagName("ul")[0].style.display="block"
 
 
 
    }
    }
  }
}
 
if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
</script>
</head>
<body>
 
<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
 
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
</ul>
</a>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
</body>
</html>
 
<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</font></p>COPY
。。
收藏 分享

Seder

Rank: 2

帖子
99 
积分
112 
技术
7  
捐助
0  
注册时间
2011-9-2 
2楼
发表于 2012-3-8 01:09 | 只看该作者
你可以参考下这个附件~

TOP

QIAOXINGXING

Rank: 4

帖子
241 
积分
431 
技术
24  
捐助
0  
注册时间
2011-9-15 
3楼
发表于 2012-3-8 11:14 | 只看该作者
回复 2# Seder


    谢谢了先！！
js 和 html 我是确实不懂。据我理解，你的附件和顶楼的代码，应该是完全不同的算法；而且你的附件的方法要修改菜单貌似很复杂。

TOP

wc726842270

Rank: 7Rank: 7Rank: 7

帖子
1107 
积分
4218 
技术
37  
捐助
0  
注册时间
2010-6-8 
4楼
发表于 2012-3-8 11:31 | 只看该作者
这个是通过DISPLAY（CSS）还有DOM来实现的
枫中残雪：风停了，我的心却在动，让我心中的寒意走向远方

TOP

QIAOXINGXING

Rank: 4

帖子
241 
积分
431 
技术
24  
捐助
0  
注册时间
2011-9-15 
5楼
发表于 2012-3-8 17:45 | 只看该作者
这个是通过DISPLAY（CSS）还有DOM来实现的
wc726842270 发表于 2012-3-8 11:31



    那你会改吗？？

TOP

Taurus

Rank: 5Rank: 5

帖子
181 
积分
634 
技术
7  
捐助
0  
注册时间
2009-1-6 
6楼
发表于 2012-5-9 20:45 | 只看该作者 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS+JS打造兼容性很好的三級導航菜單?芯晴網頁特效?CsrCode.Cn</title>
<style>
.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
 
.suckerdiv ul li{
position: relative;
}
.suckerdiv ul li ul{
left: 149px;
position: absolute;
width: 160px;
top: 0;
display: none;
}
 
.suckerdiv ul li ul li ul{ 
left: 159px; 
}
 
.suckerdiv ul li a{
display: block;
color: black;
text-decoration: none;
font:12px 宋體;
background: #fff;
padding: 5px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
.suckerdiv ul li a:visited{
color: black;
}
.suckerdiv ul li a:hover{
color: white;
background-color: gray;
}
.suckerdiv .subfolderstyle{
background: url(http://www.codefans.net/jscss/demoimg/201201/arrow-list.gif) no-repeat center right;
}
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
</style>
<script type="text/javascript">
var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
    ultags[t].parentNode.onmouseover=function(){
 
    this.getElementsByTagName("ul")[0].style.display="block"
 
    }
    ultags[t].parentNode.onmouseout=function(){
 
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    }
  }
}
function test(){ 
document.getElementsByTagName("ul")[1].style.display="none"
document.getElementsByTagName("ul")[2].style.display="none"
 
}
 
if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
</script>
</head>
<body>
 
<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#" >Folder 1</a>
  <ul id="XXX1">
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#" >Sub Item 1.2</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
 
<li><a href="#">Folder 2</a>
  <ul id="XXX2">
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a> 
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
 </li>
</ul>
</a>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
</body>
</html>
<button onclick="test()">Copy Text</button>
<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴網頁特效</a>?CsrCode.Cn 收集於互聯網，只為興趣與學習交流，不作商業用途。來源：源碼愛好者</font></p>COPY
1

评分人数

带内地用语或带里语的文章,在下读写总觉有点吃力;
如误解了各位意思的讲勿见怪   ^_^

TOP

xybzm

Rank: 1

帖子
11 
积分
22 
技术
0  
捐助
0  
注册时间
2011-11-14 
7楼
发表于 2013-11-5 22:22 | 只看该作者
学习了，谢谢分享

TOP

920168

Rank: 2

帖子
105 
积分
185 
技术
18  
捐助
0  
注册时间
2011-9-16 
8楼
发表于 2014-9-25 23:18 | 只看该作者
  谢谢分享
http://www.diecasting86.com

TOP

CrLf

Rank: 8Rank: 8

帖子
6388 
积分
18843 
技术
982  
捐助
100  
注册时间
2010-10-9 
9楼
发表于 2014-9-26 00:56 | 只看该作者
用 jquery 实现比较方便
链接：在线第三方命令行工具下载   bat、vbs、js 原生混编

TOP

返回列表