下拉菜单（含有阻止事件冒泡）

html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<cite>请选择分类</cite>

<ul>

<li><a href="javascript:;" selectid="1">ASP开发</a></li>

<li><a href="javascript:;" selectid="2">.NET开发</a></li>

<li><a href="javascript:;" selectid="3">PHP开发</a></li>

<li><a href="javascript:;" selectid="4">Javascript开发</a></li>

<li><a href="javascript:;" selectid="5">Java特效</a></li>

</ul>

</div>

</form>

</body>

</html>

$(function () {

//给cite绑定click事件

$("#divselect cite").click(function () {

//如果ul的样式是隐藏，那么让他显示，否则让他打开

if($("#divselect ul").css("display")=="none"){

$("#divselect ul").slideDown();

}else{

$("#divselect ul").slideUp();

}

return false;

})

//鼠标点击body时，下拉列表隐藏

$(document).click(function () {

$("#divselect ul").hide();

})

//鼠标点击li时内容切换到cite中

$("#divselect li").click(function (event) {

$("#divselect cite").html($(this).text())
event.stopPropagation()；

【return false;阻止事件冒泡，点击谁给谁绑定事件，加上return false阻止事件冒泡
event.stopPropagation()//阻止事件冒泡（两种方法都可以实现事件冒泡，第二种方法实现时需要在function函数中传event）】

})

转载于:https://www.cnblogs.com/xiaoleidiv/archive/2013/06/16/3138826.html

下拉菜单（含有阻止事件冒泡）相关推荐

jquery和javascript屏蔽右键菜单及阻止事件冒泡
jquery屏蔽右键菜单 $(document).ready(function(){$(document).bind("contextmenu",function(e){retur ...
kendoUI系列教程之DropDownList下拉菜单
DropDownList其实就是select,只有下拉选择.可以把现有的select或者input渲染成下拉菜单: 原码打印关于 <input id="color" va ...
jQuery 效果——显示隐藏/滑动/淡入淡出/自定义动画||事件切换——简洁版滑动下拉菜单
jQuery 效果显示隐藏效果 <!DOCTYPE html> <html lang="en"><head><meta charset= ...
事件冒泡及阻止事件冒泡事件的触发事件参数对象获取用户按下键盘的键
事件冒泡及阻止事件冒泡 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
ueditor添加下拉事件_Excel中最智能的三级下拉菜单！
我的目标:让中国的大学生走出校门的那一刻就已经具备这些office技能,让职场人士能高效使用office为其服务.支持我,也为自己加油! 关于制作下拉菜单的方法,我以前也写过, 比如用公式制作下拉菜单 ...
前端常用事件案例——抽名字（抽奖）/搜索下拉菜单/微博文本框
目录抽名字(抽奖) 搜索下拉菜单微博文本框进阶微博案例抽名字(抽奖) 实现效果是:点击开始按钮,则方框不断显示名字,点击停止,抽到的人名就是谁,并且删除,继续直到抽完后禁用按钮 ①点击开始按钮 ...
vue、Dropdown 下拉菜单、Dropdown属性事件、vue Dropdown 全部下拉菜单、vue Dropdown 全部属性事件
vue.Dropdown 下拉菜单.Dropdown属性事件.vue Dropdown 全部下拉菜单.vue Dropdown 全部属性事件设计规则何时使用代码演示 1.基本 2.右键菜单 3. ...
事件练习正反选，二级城市联动，下拉菜单练习
正反选 [HTML页面] <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
Excel事件触发VBA配置 - 名称管理器下拉菜单选项事件
因业务需求,不适合使用Excel的combobox捕捉事件处理.需求用数据有效性来定义下拉菜单,并当选项变更时触发事件.经学习发现,在每个表格的独立VBA代码内可以配置事件触发管理. 如图: 代码如下 ...

下拉菜单（含有阻止事件冒泡）

下拉菜单（含有阻止事件冒泡）相关推荐

最新文章

热门文章