您的位置：首页 > Web前端 > JQuery

css+jquery实现折叠面板效果

2018-01-25 21:56 417 查看
<!DOCTYPE html>

<html>

  <head>

    <title>折叠菜单</title>

    <style>

      body{

        background:grey;

        font-family:Microsoft Yahei;

        color:white;

      }

      .types a{

        text-decoration:none;

        color:white;

      }

      .types ul{

        display:none;

      }

      .files ul{

        display:none;

      }

    </style>

    <script src="js/jquery-1.8.2.min.js"></script>

    <script>

      $(document).ready(function(){

        var span=$(".files").find("span");

        var ul=$(".files").find("ul");

        span.bind("click",function(){

          ul.each(function(){

            $(this).css("display","none");

          });

          $(this).next().css("display","block");

        });

      });

    </script>

  </head>

  <body>

    <ul class="files">

      <li class="file">

        <span>文件2-1</span>

        <ul>

          <li class="document"><a href="#">文档2-1-1</a></li>

          <li class="document"><a href="#">文档2-1-2</a></li>

        </ul>

      </li>

      <li class="file">

        <span>文件2-2</span>

        <ul>

          <li class="document"><a href="#">菜单2-2-1</a></li>

          <li class="document"><a href="#">菜单2-2-2</a></li>

        </ul>

      </li>

      <li class="file">

        <span>文件2-3</span>

        <ul>

          <li class="document"><a href="#">菜单2-3-1</a></li>

          <li class="document"><a href="#">菜单2-3-2</a></li>

        </ul>

      </li>

    </ul>

  </body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航