jquery实现了点击鼠标后展开列表内容的导航栏效果

本文展示了jquery鼠标点击后扩展列表内容的导航栏效果。分享给大家参考。具体如下：

这是一个基于jQuery的导航栏。点击鼠标后展开隐藏列表内容，制作目录是最合适的选择。这个例子是夏普jQeury中的一个例子，这是最终的优化版本。兼容性已经过测试，火狐中的性能未知。感兴趣的朋友可以测试或改正。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/jquery-鼠标点击-显示-表格-导航-代码/

具体代码如下：

！doctype html public '-//W3C//dtd XHTML 1.0 Transitional//en ' ' http://www.w3.org/tr/XHTML 1/dtd/XHTML 1-Transitional . dtd ' html headline查询导航栏/title style type=' text/CSS ' # menu { width :30 }。has _ children { background : # 555；color : # fffcursor:pointer指针；}.突出显示{ color : # fff背景：绿色；} div { padding:0}div a{背景： # 888；显示：无；float:left宽度width:300px}/style！-引入jquery-script src=' http : jquery 1 . 3 . 2 . js ' type=' text/JavaScript '/script script type=' text/JavaScript '/等待dom元素加载。$(文档)。ready (function () {$(')。has _ children’)。单击(function () {$ (this))。add class(' highlight ')//添加高亮类。儿童(' a ')。显示()。end()//显示子节点的A元素，并将其重新定位到最后一个操作元素。兄弟姐妹()。remove class(' highlight ')//获取元素的同级元素并移除它们的highlight类。儿童(' a ')。hide()；//隐藏同级元素下的A元素})；});/script/head dydiv id=' menu ' Div class=' has _ children ' span第1章-了解jQuery/span a1.1-JavaScript和JavaScript库/a 1.2-添加jQuery/a 1.3-编写简单的jQuery代码/a/Div class=' has _ children ' span第2章-jQuery选择器/span a 2.1-什么是jQuery选择器/a 2.2-jQuery选择器/a 2.1-jQuery选择器/a 2.4-通过应用jQuery /a/Div重写示例