Html+Css+Jquery滑动-CFANZ编程社区

Html部分

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <link rel="stylesheet" type="text/css" href="css/index.css" />
       <script src="js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body>
       <div id="box">
           <div class="title">
               关雎
           </div>
           <div class="content">
               <p>关关雎鸠，在河之洲。窈窕淑女，君子好逑。</p>
               <p>参差荇菜，左右流之。窈窕淑女，寤寐求之。</p>
               <p>求之不得，寤寐思服。悠哉悠哉，辗转反侧。</p>
               <p> 参差荇菜，左右采之。窈窕淑女，琴瑟友之。</p>
               <p>参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</p>
           </div>
       </div>
   </body>
</html>

Css部分

* {
margin: 0;
padding: 0;
}

#box{
width: 370px;
margin: 200px auto;
}

.title {
   background-color: #EEEEEE;
   border: 1px solid #F1F1F1;
   height: 30px;
   line-height: 30px;
   text-align: center;
}

.content {
   border: 1px solid #F1F1F1;
   display: none;
   text-align: center;
}

Jquery部分

$(function() {
   $(".title").mouseover(function() {
       $(this).css('cursor', 'pointer');
   });
   /* 方法一：
   //设置一个变量 flag 用于标记元素状态，是“滑下”还是“滑上”
   var flag = 0;
   $(".title").click(function () {
   if (flag == 0) {
   $(".content").slideDown();
   flag = 1;
   }else {
   $(".content").slideUp();
   flag = 0;
   }
   }); */
   //方法二：
   $(".title").click(function() {
       $(".content").slideToggle();
   });
})