jQuery事件控制点击内容下拉

1、设计实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery事件</title>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<style type="text/css">
    body{
		font-family:微软雅黑;
		font-size:12px;
		font-stretch:normal;
		background-color:!important;
		width:400px;
		height:auto;
	}
   .total{
	   border:#00FF00 solid 1px;
	   font-size:12px;
   }
   .module{
	   padding:6px;
	   font-size:14px;
	   font-weight:bolder;
	   background-color:#FC6;
   }
   .content{
	   padding:8px;
	   font-size:12px;
	   font-family:微软雅黑;
	   text-align:center;
	   display:none;
   }
   .open{
	   background-color:#0000FF;
   }
</style>
<script type="text/javascript">
     $(function(){
	       $(".content").html("你好,世界真美好!");
		   $(".module").click(function(){
				$(this).addClass("open").next(".content").css("display","block");
				$(this).css("color","#FFFFF");
		   });
	 });
</script>
</head>

<body>
   <div class="total">
        <div class="module">模块</div>
        <div class="content"></div>
   </div>
</body>
</html>

2、实例结果

(1)初始化

(2)点击“模块”

时间: 2024-11-08 21:54:21

jQuery事件控制点击内容下拉的相关文章

jquery实现的点击二级下拉导航菜单

jquery实现的点击二级下拉导航菜单:二级下拉导航菜单是各种类型的网站都有使用,所以是一个必须掌握的技能,对于老手来说肯定是轻松加愉快,但是对于初学者来说未必如此,下面就通过代码实例详细介绍一下点击二级下拉菜单实现过程.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="htt

Jquery+json绑定带层次下拉框(select控件)

一.实现的效果图 二.主要代码 html代码 <select id="pid" runat="server"> <option value="0" data="|0|">不选父级类</option> </select> Jquery代码 var html = ['<option value="0">不选父级模块</option>'];

点击select下拉框获取option的属性值

select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下,结果一运行悲催了,怎么点击option事件就是不会执行.这是为什么呢,刚开始也不懂,之前没遇到过这样的需求,后来经过学习,才恍然大悟,原来select option没有点击事件,要想获得所选option的属性值,需要通过jquery的change()方法来获取,下面通过代码解释一下,代码如下: <

jquery模拟可输入的下拉框

//页面html <div id="select" class="select" > <ul> <c:forEach items="${movieCityList}" var="cy" varStatus="st"> <li> <a href="javascript:void(0)" onclick="selectOptio

jquery的隐藏和显示——下拉框式

下拉框定义value值 后面写上onchange方法(onchange 事件会在域的内容改变时发生) 然后定义方法, 然后两个span解决.

点击自定义下拉框以外的区域关闭下拉框

1.写一个下拉框 html部分: <div class="pull-left service-type mt-36"> <div id="currentService">第一<img style="margin-left: 5px" src="arrow.png"/></div> <ul class="service-option hidden">

自己编写jQuery插件 之 无限级联下拉框

因为是级联,所以数据必须是树型结构的,我这里的测试数据如下: 看下效果图: 1.>图一: 2.>图二: 3.>图三: 由图可知,下拉框的个数并不是写死的,而是动态加载的.每当下拉框选择改变的时候,会发送一次ajax请求,请求成功返回json格式数据,当返回的数据不为空时(即有子节点时),则会向页面中添加一个下拉框,没有则不添加. 插件的实现代码如下: (function ($) { $.fn.CascadingSelect = function (options) { //默认参数设置

jQuery 的 slideUp 和 slideDown 下拉卷动问题

最初公司前端写了个导航菜单,鼠标停留时弹出下拉菜单,移走鼠标时收缩下拉菜单,可就是这个简单的功能,T!!M!!D!!你屮它屮快了的时候,下拉菜单就不完整了,就像~~~包茎?? 本来官方提供的方法,会出现这种问题:如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行, 相当不美观 (演示页面). 演示页面中有一个按钮, 请用鼠标迅速地来回划过... 但是我们的会包茎,对,没错. $(this).find("a").stop().slideUp(); 因

事件冒泡 --- 仿select下拉框

要求:点击按钮时,下拉框显示:点击页面其他部分时,下拉框消失: 1. 不靠谱代码 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 #div1 { 8 width: 400px; 9 height: 300px; 10 backgro