在这里，用了两者方法达到了预期效果，第一种是通过click事件，通过鼠标点击H5标签来达到隐藏和显示。
另一种是通过鼠标的悬停来达到展开div的目的，当鼠标离开悬停区域就失去了效果，开始默认隐藏div。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0px; padding: 0px; } body { font-size: 13px; line-height: 130%; padding: 60px; } #panel { width: 300px; border: 1px solid #0050D0; } .head { padding: 5px; background: #96E555; cursor: pointer; } .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0; display: none; } </style> <script src="../jquery-3.2.1/jquery-3.2.1.js"></script> <script type="text/javascript"> // 点击h5标签可以展开下面div标签的内容 $(function(){ $("div>h5").bind("click",function(){ var $div = $(this).next(); if($div.is(":visible")){ $div.hide(); }else{ $div.show(); } }); }); // 鼠标悬停就展开，离开就收起 // $(function(){ // $("#panel").bind("mouseover",function(){ // $(this).find("div.content").show(); // }); // $("#panel").bind("mouseout",function(){ // $(this).find("div.content").hide(); // }); // }); </script> </head> <body> <div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div> </body> </html>
ps：第二种方法被注释了