根据一级菜单，显示相应的二级菜单调用的选项.这是怎么做到的

来源：蜘蛛抓取(WebSpider) 时间：2016-02-05 07:24 标签： js二级联动菜单
用css如何实现二级菜单的显示？视频中二级菜单的div隐藏了，用css如何实现二级菜单的显示？这一块不会做。。
这位同学很懒，木有签名的说～！我哪里懒了。。。
很简单，鼠标移动到一级菜单后将其下面的二级菜单设置为可见.x .xx {
.x:hover .xx {
你还没有登录，请先登录或注册慕课网帐号
我给你写了两种实现方式,一种是 css, 一种是 js, 你参考一下&!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"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&动画菜单&/title&
&style type="text/css"&
margin: 0;
padding: 0;
font-size: 14
color: #333;
text-decoration: none
list-style:
height: 30
border-bottom: 5px solid #F60;
margin-left: 50
width: 600
height: 30
width: 120px
.nav li a {
height: 30
text-align:
line-height: 30
width: 120
background: #
margin-left: 1
width: 120
height: 0;
.subNav li a {
background: #ddd
.subNav li a:hover {
background: #efefef
/*这是 css 样式*/
.lis:hover&.subNav{
//下面是 js, 也能实现
window.onload = function() {
var aLi = document.getElementsByTagName("li");
var aLi = document.getElementsByClassName('lis');
for (var i = 0; i & aLi. i++) {
//记录 aLi 的下标
aLi[i].index =
aLi[i].onmouseenter = function() {
//鼠标经过一级菜单，二级菜单动画下拉显示出来
var aUl = aLi[i].getElementsByTagName("ul")[0];
var aUl = aLi[this.index].getElementsByClassName('subNav')[0];
aUl.style.display = "block";
aLi[i].onmouseout = function() {
//鼠标离开菜单，二级菜单动画收缩起来
var aUl = aLi[i].getElementsByTagName("ul")[0];
var aUl = aLi[this.index].getElementsByClassName('subNav')[0];
aUl.style.display = "none";
&ul class="nav"&
&li class="lis"&&a href="#"&一级菜单&/a&
&ul class="subNav"&
&li&&a href="#"&二级菜单&/a&&/li&
&li&&a href="#"&二级菜单&/a&&/li&
&li&&a href="#"&二级菜单&/a&&/li&
&li&&a href="#"&二级菜单&/a&&/li&
&li class="lis"&&a href="#"&一级菜单&/a&
&ul class="subNav"&
&li&&a href="#"&二级菜单&/a&&/li&
&li&&a href="#"&二级菜单&/a&&/li&
&li&&a href="#"&二级菜单&/a&&/li&
&li&&a href="#"&二级菜单&/a&&/li&
&li class="lis"&&a href="#"&一级菜单&/a&&/li&
&li class="lis"&&a href="#"&一级菜单&/a&&/li&
&li class="lis"&&a href="#"&一级菜单&/a&&/li&
&/html&望采纳!
已被提问者采纳
你还没有登录，请先登录或注册慕课网帐号
岂能尽如人意，但求问心无愧
可以用css的伪类选择器:hover
你还没有登录，请先登录或注册慕课网帐号
当梦想照进现实
直接用bootstrap里的下拉菜单不是更好
你还没有登录，请先登录或注册慕课网帐号
55225人关注
Copyright (C)
All Rights Reserved | 京ICP备 号-2有个问题，其实看见过很多次了。今天有空，把这个解决方案写出来，给大家参考。
这个问题就是，鼠标移入一级菜单时，弹出二级菜单，鼠标离开一级菜单与二级菜单时，二级菜单消失。
看到这里，可能有的同学会想到，一级菜单【鼠标移入时】，【显示】二级菜单，【更多选项】里选择【弹出效果】就能实现了。
没错，不过问题不在这里。
在鼠标移入一级菜单时，菜单要呈现选中状态（变色），鼠标离开一级菜单与二级菜单时，一级菜单要恢复初始状态。
效果截图：
相信很多同学，在思考了。
我先说说，我通常看到的一种思路，实现过程是下面这样的。
首先，是交互样式设置，在属性的交互样式设置中，设置【选中】的样式。
然后，是一级菜单的交互。
事件：【鼠标移入时】
动作A：【显示】二级菜单，【更多选项】选择【弹出效果】；
动作B：【选中】一级菜单；
事件：【鼠标移出时】
动作：【取消选中】一级菜单
最后，是二级菜单的交互。
事件：【鼠标移入时】
动作：【选中】一级菜单
事件：【鼠标移出时】
动作：【取消选中】一级菜单
这种做法，看上去没有什么问题，但是实际操作时，会发现有Bug（大家可以尝试鼠标指针从二级菜单的左侧缓慢移出时，一级菜单的选中效果并未消失）。这是因为这种做法和弹出效果产生了冲突。那么，如何解决呢？
我们只需要，把思路做一些更改，不但没有问题，实现过程也更加简单清晰。
这个思路，很简单。一句话，一级菜单的选中状态其实是和二级菜单的显示与隐藏同步的。那么，交互就改成下面这个样子。
首先，同样是交互样式的设置，在属性的交互样式设置中，设置【选中】的样式。
然后，一级菜单的交互。
事件：【鼠标移入时】
动作：【显示】二级菜单，【更多选项】选择【弹出效果】；
最后，是二级菜单的交互。
事件：【显示时】
动作：【选中】一级菜单
事件：【隐藏时】
动作：【取消选中】一级菜单
通过上面的修改，不但减少了步骤，而且也能够正确实现需要的效果了。
这个原型的实现，其实我挺有感触。很多同学，其实能够一眼就看懂正确的步骤，但是自己做的时候，就是总找不到这个突破口。
其实，在Axure的学习过程中，很多同学都有这样的问题，就是学会了一个案例，就只是会这一个案例。
所以，我在我的《AxureRP7.0从入门到精通》这本书中，就一再强调，做原型要做好两点，扎实的基础知识和灵活的思路。但是灵活的思路从何而来？就是对基础知识的深刻理解。
很多人，写教程只是步骤的演示，点这里，戳那里，填个什么。
所以，你学了之后，也只会点这里，戳那里，填个什么。
但却不知道，为什么要点这里，戳那里，为什么填这个。
如果你不能阅尽天下好片，做到心中无码，那就不如踏踏实实的，对一部经典神作深刻理解。
奉上源文件：/s/1pK2ezUj
~~~~~~~~~~~~
~~~~~~~~~~~~
小楼老师再出新作，倾力打造Axure RP 8精品课程系列，全新的套路，经典的姿势，更舒爽，更润滑，更紧致，更销魂，想体验这种欲罢不能的学习感觉？快从下面进入！
《AxureRP 8 入门与实战 - 入门篇》------从零入门的最佳课程------
《AxureRP 8 入门与实战 - 案例篇》------实战手册的同步视频------
转载请注明： &
or分享 (0)EXCEL2007 如何设置一级下拉菜单与二级下拉菜单_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
EXCEL2007 如何设置一级下拉菜单与二级下拉菜单
上传于||暂无简介
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
定制HR最喜欢的简历
你可能喜欢

我要回帖

更多关于 js二级联动菜单 的文章

 

随机推荐