$(".title").click(function () {
$(this).addClass("curcol").next(".content").css("display", "block");
});
<!DOCTYPE html>
<html> <head>
<title>jQuery事件的链式写法</title>
<script src="jquery-3.3.1.min.js" type="text/javascript"></script>
<style type="text/css">
.iframe {
border: solid 1px #888;
font-size: 13px;
} .title {
padding: 6px;
background-color: #EEE;
} .content {
padding: 8px 0px;
font-size: 12px;
text-align: center;
display: none;
} .curcol {
background-color: #CCC
}
</style>
<script type="text/javascript">
$(function () {
$(".content").html("您好！欢迎来到jQuery的精彩世界。");
$(".title").click(function () {
$(this).addClass("curcol").next(".content").css("display", "block");
});
});
</script>
</head> <body>
<div class="iframe">
<div class="title">标题</div>
<div class="content"></div>
</div>
</body> </html>
当页面首次加载时，被包含的内容<div> 标记是不可见的，当用户单击主题<div> 标记时，改变自身的背景色，并将内容<div> 标记显示出来。