<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<link rel="stylesheet" href="base.css" />
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
</head>
<body>
<style>
.t-list{ margin-top: 20px;}
.t-list li{ float: left; width: 100px; text-align: center; background: #eee;}
.item{ color: #f60; font-weight: bold;}
.info{ display: none;}
</style>
<ul id="list" class="g-w t-list">
<li>
<a href="###">列表一</a>
<div class="info">菜单一</div>
<div class="info">菜单二</div>
<div class="info">菜单三</div>
<div class="info">菜单四</div>
</li>
<li>
<a href="###">列表二</a>
<div class="info">菜单一</div>
<div class="info">菜单二</div>
<div class="info">菜单三</div>
</li>
<li>
<a href="###">列表三</a>
<div class="info">菜单一</div>
<div class="info">菜单二</div>
</li>
<li>
<a href="###">列表四</a>
<div class="info">菜单一</div>
<div class="info">菜单二</div>
<div class="info">菜单三</div>
<div class="info">菜单四</div>
<div class="info">吴者然</div>
</li>
</ul>
<div class="g-w" style="padding-top: 120px;">
<em>阅谁问君诵，水落清香浮。</em>
<button class="btn1">请点击这里</button>
</div>
<div class="g-w" style="padding-top: 60px;">
<span>一站式共享网络</span>
<button class="btn2">请点击这里</button>
</div>
<script>
$(function() {
// 下拉菜单
downMenu();
demo1();
demo2();
});
function downMenu(){
//bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$('#list').find('li').bind({
mouseenter: function(){
$(this).children('a').addClass('item').end().find('.info').show();
},
mouseleave: function(){
$(this).children('a').removeClass('item').end().find('.info').hide();
}
});
}
function demo1(){
//$(selector).bind(event,data,function)
$(".btn1").bind("click",function(){
$("em").slideToggle();
});
}
function demo2(){
//$(selector).bind({event:function, event:function, ...})
$(".btn2").bind({
click:function(){$("span").slideToggle();},
mouseover:function(){$("body").css("background-color","#f60");},
mouseout:function(){$("body").css("background-color","#fff");}
});
}
//拓展阅读：http://onestopweb.iteye.com/blog/2356131
</script>
</body>
</html>
效果图：
相关推荐
在本文中，我们将深入探讨如何使用JavaScript库JQuery（简称JQ）来创建一个高效的、最少代码实现的导航栏下拉菜单。下拉菜单在现代网页设计中是必不可少的元素，它能帮助用户轻松访问网站的多层次结构。下面，我们将...
通过这个实例，你不仅学会了如何使用jQuery创建二级下拉菜单，还了解了如何处理用户交互事件和优化动画效果。这只是一个起点，jQuery库提供了许多其他功能，如AJAX请求、DOM操作、动画效果等，继续深入学习，你将...
通过这种方式，我们可以利用jQuery的事件绑定和动画功能，创建一个响应式的下拉菜单，使得用户在鼠标移入和移出时，菜单可以平滑地展开和收起，从而提供友好的用户体验。这个例子展示了如何结合HTML、CSS和...
`：如果遍历到的元素既不是'menu'元素也不是其子元素，说明点击发生在下拉菜单之外，于是隐藏所有class为'menuList'的下拉菜单和class为'overlay'的遮罩层。 这个方法利用了jQuery的选择器和事件处理，有效地实现了...
利用struts2和Ajax实现json对象的传输，然后实现菜单的二级联动 下面是我的 js文件原码： 代码如下: var ...//获取一级菜单，绑定事件 $(“#did”).bind(“change”,function(){ //alert($(this).val()); mail.
3. **下拉菜单（Dropdown Menu）**：下拉菜单在网页导航中广泛应用，jQuery通过`.toggle()`轻松实现展开与收起，配合`.stop()`防止连续触发导致的闪烁现象。 4. **滑动效果（Slide）**：使用`.slideToggle()`、`....
2. **组件设计**：JQEasyUI提供了多种组件，如对话框、表格、下拉菜单、日期选择器等。这些组件都是通过JavaScript对象来实现的，每个组件都有自己的配置项和方法。理解组件的设计模式，包括如何定义配置项，如何...
在Vue.js中，实现鼠标移入（mouseenter）和移出（mouseleave）事件是常见的交互功能，主要用于添加动态效果或提供额外的...在实际项目中，这些技术可以广泛应用于各种交互设计，如提示信息显示、下拉菜单、工具提示等。
代码中的 `$('#Select1').bind('change', function () {...})` 部分展示了如何根据用户从下拉菜单选择的值动态改变图像的透明度。当选项改变时，图像会在1000毫秒内淡入到选定的透明度，例如用户选择 "0.3"，则图像...
为了使提示内容看起来像一个可选择的下拉菜单，内部可能还包含一个`<table>`元素，其`cellspacing`和`cellpadding`属性设置为0，以便更好地控制布局。 ### JavaScript和jQuery实现 1. **事件监听**：要实现搜索...