`

jquery 简易menu

阅读更多
<ul id="menu" style="width:300px;background-color:yellow">
	<li><a style="width:100px;background-color:pink" href="#">1</a>
		<ul>
			<li style="background-color:red">1</li>
			<li style="background-color:red">2</li>
			<li style="background-color:red">3</li>
		</ul>
	</li>
	
	<li><a style="width:100px;background-color:pink" href="#">2</a>
		<ul>
			<li style="background-color:red">1</li>
			<li style="background-color:red">2</li>
			<li style="background-color:red">3</li>
		</ul>
	</li>
	
	<li><a style="width:100px;background-color:pink" href="#">3</a>
		<ul>
			<li style="background-color:red">1</li>
			<li style="background-color:red">2</li>
			<li style="background-color:red">3</li>
		</ul>
	</li>
</ul>

<script type="text/javascript" src="/common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">	
	$(document).ready(function() {
		$("#menu > li > ul").css("display","none");
		
		$("#menu > li").click(function(event){
			if(event.target===this||event.srcElement===this){
				if($(this).children("ul").css("display")==="block"){
					$(this).children("ul").css("display","none");
				}else{
					$("#menu > li > ul").css("display","none");
					$(this).children("ul").css("display","block");
				}
				
			}
		});
	});
</script>


如果不使用event.target===this(FF) || event.srcElement===this(IE)的判断,则在点下级li时也会将menu隐藏掉,刚开始在这个问题上有些困惑,现在终于解决了。



分享到:
评论

相关推荐

    jQuery简易时尚的圆形展开菜单

    总结起来,创建一个jQuery简易时尚的圆形展开菜单,需要理解HTML布局、CSS样式以及jQuery的事件处理和动画效果。通过结合这些技术,我们可以构建出一个既美观又实用的菜单,提升用户在网站上的互动体验。在实际开发...

    jquery-css3-circle-pop-menu.rar

    今天我们要为大家分享一款非常漂亮的jQuery/CSS3五彩环形弹出菜单,一开始菜单项都聚集在...类似的菜单我们之前也有分享过,比如这款jQuery简易时尚的圆形展开菜单和jQuery SVG高端圆形菜单导航。 在线演示源码下载

    JQuery简单右键菜单

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计等任务。本文将深入探讨如何使用jQuery来创建一个简单的右键菜单,这在许多网页应用中是一个常见的需求...

    jQuery实现的红色简易二级下拉导航菜单效果源码.zip

    本资源"jQuery实现的红色简易二级下拉导航菜单效果源码.zip"提供了一种使用jQuery库创建的红色简约风格二级下拉菜单的实现方案。 jQuery是一个轻量级、高性能的JavaScript库,简化了HTML文档遍历、事件处理、动画...

    简易实用的jQuery Tab选项卡菜单插件

    本插件以其简易实用的特点,成为开发者们快速构建Tab功能的首选工具。 在**描述**中提到,这款jQuery Tab插件具有以下特性: 1. **动画特效**:当用户点击菜单项时,上边框会有动画效果,这增加了视觉吸引力,使...

    JQ简易滑动门菜单………………

    要创建一个JQ简易滑动门菜单,我们首先要准备HTML结构。通常,菜单由`&lt;ul&gt;`和`&lt;li&gt;`元素组成,每个`&lt;li&gt;`包含一个主菜单项和一个或多个子菜单项。子菜单项可以隐藏在主菜单项下方,通过CSS设置`display:none`实现。 ...

    js,jq,css多方面实现简易下拉菜单功能.docx

    ### 使用JS、JQuery与CSS实现简易下拉菜单功能 在网页设计中,下拉菜单是一种常见的导航元素,它能够帮助用户快速找到所需的信息或页面。本文将详细介绍如何利用JavaScript(简称JS)、jQuery(简称JQ)以及CSS来...

    简易快餐在线订购功能实现

    本教程以"简易快餐在线订购功能实现"为例,旨在探讨如何利用jQuery的`each`、`find`和`css`方法来构建一个用户友好的在线订购系统。 首先,`jQuery.each()`方法是一个用于遍历数组或对象的工具,它允许我们对每个...

    红色简易二级下拉导航菜单.zip

    "红色简易二级下拉导航菜单.zip"是一个专为网站设计的交互式导航菜单资源,其核心构建基于JavaScript库jQuery和一些CSS3技术。下面将详细阐述这个菜单导航的设计原理和实现方法。 首先,jQuery是一个广泛使用的...

    js制作的简易二级菜单

    本教程将详细介绍如何使用JavaScript来创建一个简易的二级菜单,以及如何通过调整CSS样式来实现不同的视觉效果。 首先,我们需要理解二级菜单的基本结构。通常,一级菜单是页面顶部水平排列的一系列链接,点击每个...

    easyui简易demo

    1. **组件使用**:EasyUI 提供了如 `datagrid`(数据网格)、`form`(表单)、`dialog`(对话框)、`menu`(菜单)等多种组件,这些组件的使用方法会在示例中得以展示,帮助我们理解如何在 HTML 结构中引入并配置...

    NotesForMenu

    【笔记标题】:NotesForMenu——简易jQuery多级树形菜单插件 【笔记内容】: NotesForMenu是一个专为简化网页开发而设计的jQuery插件,它专注于创建多层级的树形菜单。这个插件的突出特点是其极简的使用方式,只...

    简易版的论谈主结构 AJAX

    - **Menu.aspx**:可能包含论坛的导航菜单,如分类、子论坛、用户中心等,通过AJAX更新可保持用户在当前页面不跳转。 - **Write.aspx**:用于用户撰写新帖子或回复的表单页面,AJAX可以实现预览和提交功能。 - **...

    简易版easyUI增删查改

    EasyUI 是基于 jQuery 的一组插件集合,它提供了丰富的组件库,如表格(datagrid)、对话框(dialog)、菜单(menu)等,用于构建交互式的Web应用。在本项目中,`easyUI` 主要用于部门列表展示、添加、编辑和删除...

    js,jq,css多方面实现简易下拉菜单功能

    本篇文章将探讨如何利用JavaScript (js), jQuery (jq) 和 CSS 多方面实现简易下拉菜单功能。 首先,我们从HTML结构开始。在提供的代码片段中,可以看到一个`&lt;ul&gt;`元素作为主菜单容器,包含若干个`&lt;li&gt;`元素,每个`...

    metisMenu的bootstrap模板

    本篇文章将深入探讨如何利用MetisMenu这个jQuery插件,与Bootstrap相结合,打造一款实用的后台简易模板。 MetisMenu是一款专为Bootstrap设计的多级菜单插件,它提供了优雅的折叠和展开效果,使得在有限的屏幕空间内...

    第18章 SplitButton(分割按钮)组件1

    通过JavaScript,我们可以使用jQuery选择器和`.splitbutton()`方法来创建SplitButton。例如: ```javascript $('#box').splitbutton({}); ``` **二、属性列表** SplitButton组件有多个可配置属性,这些属性...

    GoodProject Maven Webapp.zip

    jQuery EasyUI为提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,validatebox,datagrid,window,tree等等。 jQuery EasyUI是基于JQuery的一个前台ui界面的插件,功能相对没extjs强大,但...

    C#左侧导航菜单

    5. **JavaScript/jQuery**:为了实现交互效果,如下拉子菜单、动画过渡等,我们可以使用JavaScript(原生或jQuery库)。例如,当用户鼠标悬停在菜单项上时,子菜单可以滑出;点击后,可以用JavaScript改变页面内容或...

    html+css+js实现XP WINDOW界面

    通过选择器(如类选择器 `.window` 或ID选择器 `#menu`),可以精确地控制每个元素的样式。CSS3的特性,如伪类(`:hover`, `:active`)和过渡(`transition`),可以使交互更加平滑自然。 再者,JavaScript是实现...

Global site tag (gtag.js) - Google Analytics