JQuery 点击实现展开折叠菜单博客分类： JQuery Jquery

程序员文章站 2024-02-16 15:24:22

...

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

<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>

</body>

</html>

JQuery 点击实现展开折叠菜单博客分类： JQuery Jquery