<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简易时尚的圆形展开菜单,需要理解HTML布局、CSS样式以及jQuery的事件处理和动画效果。通过结合这些技术,我们可以构建出一个既美观又实用的菜单,提升用户在网站上的互动体验。在实际开发...
今天我们要为大家分享一款非常漂亮的jQuery/CSS3五彩环形弹出菜单,一开始菜单项都聚集在...类似的菜单我们之前也有分享过,比如这款jQuery简易时尚的圆形展开菜单和jQuery SVG高端圆形菜单导航。 在线演示源码下载
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计等任务。本文将深入探讨如何使用jQuery来创建一个简单的右键菜单,这在许多网页应用中是一个常见的需求...
本资源"jQuery实现的红色简易二级下拉导航菜单效果源码.zip"提供了一种使用jQuery库创建的红色简约风格二级下拉菜单的实现方案。 jQuery是一个轻量级、高性能的JavaScript库,简化了HTML文档遍历、事件处理、动画...
本插件以其简易实用的特点,成为开发者们快速构建Tab功能的首选工具。 在**描述**中提到,这款jQuery Tab插件具有以下特性: 1. **动画特效**:当用户点击菜单项时,上边框会有动画效果,这增加了视觉吸引力,使...
要创建一个JQ简易滑动门菜单,我们首先要准备HTML结构。通常,菜单由`<ul>`和`<li>`元素组成,每个`<li>`包含一个主菜单项和一个或多个子菜单项。子菜单项可以隐藏在主菜单项下方,通过CSS设置`display:none`实现。 ...
### 使用JS、JQuery与CSS实现简易下拉菜单功能 在网页设计中,下拉菜单是一种常见的导航元素,它能够帮助用户快速找到所需的信息或页面。本文将详细介绍如何利用JavaScript(简称JS)、jQuery(简称JQ)以及CSS来...
本教程以"简易快餐在线订购功能实现"为例,旨在探讨如何利用jQuery的`each`、`find`和`css`方法来构建一个用户友好的在线订购系统。 首先,`jQuery.each()`方法是一个用于遍历数组或对象的工具,它允许我们对每个...
"红色简易二级下拉导航菜单.zip"是一个专为网站设计的交互式导航菜单资源,其核心构建基于JavaScript库jQuery和一些CSS3技术。下面将详细阐述这个菜单导航的设计原理和实现方法。 首先,jQuery是一个广泛使用的...
本教程将详细介绍如何使用JavaScript来创建一个简易的二级菜单,以及如何通过调整CSS样式来实现不同的视觉效果。 首先,我们需要理解二级菜单的基本结构。通常,一级菜单是页面顶部水平排列的一系列链接,点击每个...
1. **组件使用**:EasyUI 提供了如 `datagrid`(数据网格)、`form`(表单)、`dialog`(对话框)、`menu`(菜单)等多种组件,这些组件的使用方法会在示例中得以展示,帮助我们理解如何在 HTML 结构中引入并配置...
【笔记标题】:NotesForMenu——简易jQuery多级树形菜单插件 【笔记内容】: NotesForMenu是一个专为简化网页开发而设计的jQuery插件,它专注于创建多层级的树形菜单。这个插件的突出特点是其极简的使用方式,只...
- **Menu.aspx**:可能包含论坛的导航菜单,如分类、子论坛、用户中心等,通过AJAX更新可保持用户在当前页面不跳转。 - **Write.aspx**:用于用户撰写新帖子或回复的表单页面,AJAX可以实现预览和提交功能。 - **...
EasyUI 是基于 jQuery 的一组插件集合,它提供了丰富的组件库,如表格(datagrid)、对话框(dialog)、菜单(menu)等,用于构建交互式的Web应用。在本项目中,`easyUI` 主要用于部门列表展示、添加、编辑和删除...
本篇文章将探讨如何利用JavaScript (js), jQuery (jq) 和 CSS 多方面实现简易下拉菜单功能。 首先,我们从HTML结构开始。在提供的代码片段中,可以看到一个`<ul>`元素作为主菜单容器,包含若干个`<li>`元素,每个`...
本篇文章将深入探讨如何利用MetisMenu这个jQuery插件,与Bootstrap相结合,打造一款实用的后台简易模板。 MetisMenu是一款专为Bootstrap设计的多级菜单插件,它提供了优雅的折叠和展开效果,使得在有限的屏幕空间内...
通过JavaScript,我们可以使用jQuery选择器和`.splitbutton()`方法来创建SplitButton。例如: ```javascript $('#box').splitbutton({}); ``` **二、属性列表** SplitButton组件有多个可配置属性,这些属性...
jQuery EasyUI为提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,validatebox,datagrid,window,tree等等。 jQuery EasyUI是基于JQuery的一个前台ui界面的插件,功能相对没extjs强大,但...
5. **JavaScript/jQuery**:为了实现交互效果,如下拉子菜单、动画过渡等,我们可以使用JavaScript(原生或jQuery库)。例如,当用户鼠标悬停在菜单项上时,子菜单可以滑出;点击后,可以用JavaScript改变页面内容或...
通过选择器(如类选择器 `.window` 或ID选择器 `#menu`),可以精确地控制每个元素的样式。CSS3的特性,如伪类(`:hover`, `:active`)和过渡(`transition`),可以使交互更加平滑自然。 再者,JavaScript是实现...