jquery查找子元素和兄弟元素

手风琴菜单动画效果实现

最新推荐文章于 2025-06-27 10:44:03 发布

weixin_30723433

最新推荐文章于 2025-06-27 10:44:03 发布

阅读量192

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiufengchen/p/10411144.html

本文介绍了一种使用jQuery实现的手风琴菜单动画效果，通过点击标题来展开和收起对应的div元素，同时关闭其他打开的div。该效果利用了slideDown和slideUp动画，为用户提供友好的交互体验。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {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-1.12.4.js"></script>
  <script>
     $(function () {
       $(".groupTitle").click(function () {
         $(this).next("div").slideDown(200).parent().siblings().children("div").slideUp(200);
       })
     })
  </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>