jQuery学习笔记(3)---点击触发菜单的展开与收起

一、源代码:

<!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>test</title>
<script language="javascript" src="jquery-1.11.3.min.js"></script>
<script language="javascript">
	$(function(){
		$('dt').click(function(){   //点击时在展开和收起菜单之间来回切换
			$(this).nextUntil('dt').toggle(500);   //隐藏/显示效果的速度设置为500毫秒
		});
		
	});
</script>
<style type="text/css">
	dt{cursor:pointer}
</style>
</head>

<body>
<center>
  <dl>
    <dt>国产手机</dt>
    <dd>小米</dd>
    <dd>华为</dd>
    <dd>联想</dd>
    <dd>中兴</dd>
    <dd>酷派</dd>
    
    <dt>国外手机</dt>
    <dd>苹果</dd>
    <dd>三星</dd>
  </dl>
</center>
</body>
</html>

二、运行结果:

jQuery学习笔记(3)---点击触发菜单的展开与收起_第1张图片



三、相关知识:

1.显示/隐藏函数

$(this).nextUntil('dt').toggle(500);

$(this):当前jQuery对象。这里是dt元素。

nextUntil('dt'):查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止。这里是查找当前元素dt之后的所有dd元素,直到遇到下一个dt元素为止。

toggle(500):绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。这里实现点击时展开与隐藏dt下dd的内容。


2.另一种写法:

$('dt').click(function(){   //点击时在展开和收起菜单之间来回切换
			if($(this).next().css('display')=='none')   //判断为隐藏时,执行显示功能
				$(this).nextUntil('dt').show(500);
			else
				$(this).nextUntil('dt').hide(500);
		});



你可能感兴趣的:(JavaScript,html,jquery)