`

JQuery 点击实现展开折叠菜单

阅读更多

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<script type="text/javascript" src="jquery-1.9.1.min.js">

<style>

$(document).ready(function() {

$('#faq').find('dd').hide();

//.隐藏显示的元素。

$('#faq').find('dt').click(function() {

var answer = $(this).next(); //当前节点的下一个节点

// alert(answer.is(':visible'));  返回true / false

if (answer.is(':visible')) {

//Boolean布尔值is( String  expr )用一个表达式来检查当前选择的元素集合,

// 如果其中至少有一个元素符合这个给定的表达式就返回true。

//answer.is(':visible')是指可见的answer元素.

//如果可见就调用answer.slideUp();使之隐藏.

//else则是不可见的元素 调用answer.slideDown();使之显示.

//类似的写法还有answer.is(':first')answer.is(':last')之类的,类似于CSS的伪类a:hover

answer.slideUp();

} else {

answer.slideDown();

}

});

});

</script>

<style>

body {

font-size: 10.5pt;

}

 

dt {

background: #00ffcc;

}

</style>

</head>

<body>

<dl id="faq">

<dt>展开</dt>

<dd>我爱龙</dd>

<dt>展开</dt>

<dd>我爱茹</dd>

<dt>展开</dt>

<dd>我爱你</dd>

</dl>

</body>

</html>

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics