zoukankan      html  css  js  c++  java
  • jquery 写的折叠菜单

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="gb2312">
    <title>jqurey折叠菜单</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    </head>
    <body>
    <!-- 折叠菜单开始 -->
    <div >
    <button id="btn_packinglist">显示列表</button>
    </div>
    <!-- 列表项 -->
    <div class="item">子菜单</div>
    <div class="sub_item" >副菜单</div>
    <!-- 列表项 -->
    <div class="item">子菜单</div>
    <div class="sub_item" >副菜单</div>
    <!-- 列表项 -->
    <div class="item">子菜单</div>
    <div class="sub_item" >副菜单</div>
    <!-- 列表项 -->
    <div class="item">子菜单</div>
    <div class="sub_item" >副菜单</div>
    <!-- 列表项 -->
    <div class="item">子菜单</div>
    <div class="sub_item" >副菜单</div>
    <style>
    .item {
    250px;height:80px;display:none;background-color:#949494;
    }
    .sub_item{
    250px;height:80px;display:none;background-color:#E4E4E4;
    }
    #btn_packinglist{
    250px;height:80px;
    }
    </style>
    <script type="text/javascript">
    $("#btn_packinglist").click(function(){
    $(".item").slideToggle("fast");
    $(".sub_item").hide();
    });
    $(".item").click(function(){
    $(this).next().slideToggle("fast");
    $(".item").not(this).next().slideUp();
    });
    </script>
    <!-- 折叠菜单结束 -->
    </body>
    </html>

  • 相关阅读:
    475. Heaters
    69. Sqrt(x)
    83. Remove Duplicates from Sorted List Java solutions
    206. Reverse Linked List java solutions
    100. Same Tree Java Solutions
    1. Two Sum Java Solutions
    9. Palindrome Number Java Solutions
    112. Path Sum Java Solutin
    190. Reverse Bits Java Solutin
    202. Happy Number Java Solutin
  • 原文地址:https://www.cnblogs.com/caer/p/5778087.html
Copyright © 2011-2022 走看看