jquery实现简单下拉菜单效果怎么设置,jquery实现简单的下拉菜单

jquery实现简单下拉菜单效果怎么设置,jquery实现简单的下拉菜单,jquery实现简单下拉菜单效果

本文主要详细介绍jquery实现简单下拉菜单效果。本文中的示例代码非常详细,具有一定的参考价值。感兴趣的朋友可以参考一下。

本文用几行简单的jquery代码实现了一个简单的下拉菜单效果,供大家参考。具体内容如下

看效果。

超文本标记语言

保险商实验所

主题市场

保险商实验所

体育学校

保险商实验所

Li三级菜单a/li

Li三级菜单b/li

Li三级菜单c/li

Li三级菜单d/li

/ul

/李

优车族

保险商实验所

三电平

保险商实验所

四级李/李

四级李/李

四级李/李

/ul

/李

三年级李/李

三年级李/李

三年级李/李

/ul

/李

李生活馆/李

/ul

/李

特色购物

保险商实验所

李淘宝二手/李

李拍卖/李

李喜欢购物

李全球购/李

李桃女/李

/ul

/李

促销

保险商实验所

李天天特价/李

li免费试用/li

李解围/李

李元开拍/李

/ul

/李

Li工具/li

/ul

简单地设置css。

style type=text/css

ul li {

列表样式:无;

}

li ul {

显示:无;

}。加号{

list-style-image:URL(img/plus . gif);

}。减去{

list-style-image:URL(img/MINUS . gif);

}

/风格

javascript,javascript

script src= js/jquery-1 . 11 . 0 . js type= text/JavaScript charset= utf-8 /script

脚本类型=文本/javascript

$(function () {

//用ul给li添加一个图标(添加类名)

$(li:has(ul))。addClass(plus )

//添加一个点击事件。点击(功能(e) {

//查看直接点击的li(事件源)是否有子元素。

if ($(e.target)。孩子()。长度){

$(这个)。孩子()。slide toggle();

$(这个)。toggle class( MINUS );

}

e .停止传播();//防止事件冒泡,以便仅激活当前层。

});

});

/脚本

实现了简单的下拉菜单。

这就是本文的全部内容。希望对大家的学习有帮助,支持我们。

jquery实现简单下拉菜单效果怎么设置,jquery实现简单的下拉菜单