$(".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> 标记显示出来。