孙肖宁

手风琴特效(jQuery)
描述:当用户的鼠标经过标题的时候,内容显示,鼠标经过那个标题,显示那个内容吗,其余的全部隐藏。当鼠标离开这片区域的...
扫描右侧二维码阅读全文
04
2018/05

手风琴特效(jQuery)

描述:当用户的鼠标经过标题的时候,内容显示,鼠标经过那个标题,显示那个内容吗,其余的全部隐藏。当鼠标离开这片区域的时候,全部隐藏。jQuery的版本为1.8.
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>手风琴案例</title>
   <style>
       * {padding: 0;margin: 0;}
       ul { list-style-type: none;}

       .parentWrap {
           width: 200px;
           text-align:center;

       }

       .menuGroup {
           border:1px solid #999;
           background-color:#e0ecff;
       }

       .groupTitle {
           display:block;
           height:20px;
           line-height:20px;
           font-size: 16px;
           border-bottom:1px solid #ccc;
           cursor:pointer;
       }

       .menuGroup > div {
           height: 200px;
           background-color:#fff;
           display:none;
       }
   </style>
   <script src="jquery.min.js"></script>
   <script>
       $(function () {
           $(".parentWrap span").mouseenter(function () {
               $(this).next().show().parent("li").siblings("li").find("div").hide();
           });
           $(".parentWrap").mouseleave(function () {
               $(".parentWrap li").find("div").hide();
           })
       })
   </script>
</head>
<body>
   <ul class="parentWrap">
       <li class="menuGroup">
           <span class="groupTitle">标题1</span>
           <div>我是弹出来的div1</div>
       </li>
       <li class="menuGroup">
           <span class="groupTitle">标题2</span>
           <div>我是弹出来的div2</div>
       </li>
       <li class="menuGroup">
           <span class="groupTitle">标题3</span>
           <div>我是弹出来的div3</div>
       </li>
       <li class="menuGroup">
           <span class="groupTitle">标题4</span>
           <div>我是弹出来的div4</div>
       </li>
   </ul>
</body>
</html>
Last modification:May 4th, 2018 at 10:54 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment