<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nav</title>
<style type="text/css">
<!--
ul,li,dl,dd{margin:0;padding:0;}
li{list-style-type:none;}
dl{text-indent:2em;}
-->
</style>
<script type="text/javascript">
function hiddenAllUL(){
var nav2Id = document.getElementById("nav2");
var arryUL = nav2Id.getElementsByTagName("ul");
for(i=0;i<arryUL.length;i++){
arryUL[i].style.display = "none";
}
}
function liClickEvent(emid){
hiddenAllUL();
var obj = document.getElementById(emid);
obj.style.display = "block";
}
window.onload = function(){
liClickEvent("first");
}
</script>
</head>
<body>
<ul id="nav">
<li onclick="liClickEvent('first');">aaa</li>
<li onclick="liClickEvent('second');">bbb</li>
<li onclick="liClickEvent('third');">ccc</li>
</ul>
<dl id="nav2">
<dd>
<ul id="first">
<li>111</li>
</ul>
</dd>
<dd>
<ul id="second">
<li>222</li>
</ul>
</dd>
<dd>
<ul id="third">
<li>333</li>
</ul>
</dd>
</dl>
</body>
</html>
思路：1.先把所有的二级菜单隐藏起来.
2.把一级菜单和二级菜单通过id对应起来.
3.一级菜单onclick事件触发对应的二级菜单显示出来.
4.加载后默认的第一个一级菜单对应的二级菜单显示出来.
分享到：
相关推荐
对于二级菜单，可能需要处理父菜单项的`MouseEnter`或`MouseOver`事件，以显示或隐藏子菜单。 5. **可扩展性**：为了确保菜单系统的可扩展性，设计时应考虑未来可能增加的新菜单项或功能。这可以通过使用依赖属性、...
二级菜单的ListView需要监听一级菜单的选择事件，动态更新数据源并刷新。 ```java // 主Activity public class MainActivity extends AppCompatActivity { private ListView mainMenuListView, subMenuListView; ...
值得注意的是，创建自定义右键菜单和二级菜单需要编程知识，因为DLL文件需要包含适当的接口来处理用户的点击事件。对于不熟悉编程的用户，可以使用第三方工具，如ShellMenuNew，这些工具提供图形界面，简化了添加...
JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 ...
通过巧妙地结合这两个事件，我们可以控制二级菜单的显示和隐藏。 在描述中提到的"timeout原理"，可能是指延迟执行某些操作，例如使用`setTimeout`函数。在鼠标悬停事件中，如果立即弹出二级菜单，可能会因为用户的...
3. **事件移除**：为了防止鼠标离开一级菜单时二级菜单仍然显示，我们需要在一级菜单上添加`mouseout`事件监听器，并在对应的事件处理函数中隐藏二级菜单： ```actionscript myTopLevelMenuItem.addEventListener...
在Android开发中，实现二级菜单通常涉及到多个列表视图(ListView)的交互，以及自定义适配器(Adapter)和事件监听。"android 二级菜单、双ListView 仿美团、购物二级菜单"这个项目旨在创建一个类似美团应用中的购物...
例如，我们可以监听一级菜单项的`mouseover`和`mouseout`事件，当鼠标进入一级菜单项时显示二级子菜单，离开时隐藏。这里的关键在于正确地选择和操作DOM元素，可以使用`getElementById`、`getElementsByClassName`或...
二级菜单! 很值得下载看看!资源免费,大家分享!!
在IT行业中，二级菜单是一种常见的用户界面元素，用于组织和展示复杂的导航结构。它通常出现在主菜单下方，为用户提供更具体、细分的操作选项。二级菜单的设计和应用对于提高用户体验至关重要，因为它可以帮助用户更...
RecyclerView的优化和二级菜单的展开是提高用户体验的关键技术。本文将深入探讨这两个主题，帮助开发者创建流畅、高效的Android应用。 首先，RecyclerView优化是确保应用性能的重要一环。以下是一些关键的优化策略...
JavaScript用于监听用户的鼠标悬停事件，当检测到鼠标移到一级菜单项上时，触发相应的函数来显示二级菜单。这个过程可以通过添加或移除CSS类来控制二级菜单的可见性。CSS则用来设计菜单的样式，包括颜色、字体、布局...
在IT领域，二级菜单是一种常见的用户界面元素，用于在主菜单下组织更具体的子功能或选项。在诸如美团、大众点评、淘宝和饿了么这样的应用程序中，二级菜单发挥着至关重要的作用，帮助用户快速定位并访问他们需要的...
本文将深入探讨标题“经典的CSS二级菜单修改：二级菜单为水平式2”所涉及的知识点，并基于描述中提及的博文《CSS二级菜单》进行详细解析。 首先，CSS（层叠样式表）是用于控制网页元素样式的重要工具。在制作二级...
几个月前初学前端时挖的坑，把二级菜单设计得和一级菜单在DOM结构上没啥关系，导致想要鼠标悬浮一级菜单即可显示该一级菜单对应的二级菜单，移出则显示当前页所在一级菜单所对应的二级菜单列表不好用CSS实现，现在用...
通常，JavaScript库如jQuery或原生JavaScript代码会被用来处理鼠标悬停、点击事件，以及隐藏和显示二级菜单项。`mm_menu.js`可能是一个特定的下拉菜单库，如Milonic Menu，它提供了预定义的样式和行为；而`menu.js`...
"android二级菜单"这个主题就涉及到了如何构建一个多层级的导航结构，并且加入了独特的折纸动画效果，来提升用户体验。折纸动画是一种视觉表现手法，它能够使用户界面更具吸引力，同时也为用户提供了一种动态的反馈...
在这个例子中，`hover`函数处理悬停事件，`slideDown`和`slideUp`分别负责展开和收起二级菜单，`stop`确保动画流畅，防止连续快速移动鼠标时的闪烁。 五、优化与兼容性 为了确保在不同浏览器和设备上的良好表现，...
当用户鼠标悬停在一级菜单项上时，JavaScript会触发事件，通过改变CSS属性来显示或隐藏二级菜单。 在华为官网的案例中，我们可能会看到以下特点： 1. 清晰的层级：一级菜单通常包含主要类别，二级菜单展示更具体的...
4. **事件委托**：如果二级菜单项很多，为每个菜单项添加单独的事件处理器效率较低。这时可以使用jQuery的事件委托，如`.on()`方法，将事件绑定到父级元素上，然后根据事件的目标元素来处理。 5. **动画效果**：...