zoukankan      html  css  js  c++  java
  • jquery实现比较靠谱的手风琴代码

    比较靠谱的手风琴代码
    <pre>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>自制手风琴</title>
    <script type="text/javascript" src="/index/js/jquery.min.js"></script>
    <style type="text/css">


    .menulist li {
    display: none;
    }


    </style>
    </head>
    <body>
    <div class="menulist">
    <ul>
    <span>AAAAA<b>+</b></span>
    <li>11111</li>
    <li>11111</li>
    <li>11111</li>
    <li>11111</li>
    </ul>
    <ul>
    <span>BBBBB<b>+</b></span>
    <li>22222</li>
    <li>22222</li>
    <li>22222</li>
    </ul>
    <ul>
    <span>CCCCC<b>+</b></span>
    <li>33333</li>
    <li>33333</li>
    <li>33333</li>
    <li>33333</li>
    <li>33333</li>
    </ul>
    <ul>
    <span>DDDDD<b>+</b></span>
    <li>44444</li>
    <li>44444</li>
    </ul>
    <ul>
    <span>EEEEE<b>+</b></span>
    <li>55555</li>
    <li>55555</li>
    <li>55555</li>
    </ul>
    </div>
    <script type="text/javascript">
    $(function () {
    $('span').click(function () {
    if ($(this).siblings('li').hasClass('on')) {
    $(this).siblings('li').slideUp(500).removeClass('on');
    $(this).children('b').text('+');
    } else {
    $(this).siblings('li').slideDown(500).addClass('on');
    $(this).children('b').text('-');
    }
    });
    });
    </script>
    </body>
    </html>

    </pre>

  • 相关阅读:
    Scala之eq,equals,==的区别
    Spark Streaming流计算特点及代码案例
    刷题50—水壶问题
    刷题49(力扣3道题)
    刷题48——最长回文串
    刷题47——矩形重叠
    刷题46——拼写单词
    刷题45(力扣两道题)
    刷题44——岛屿的最大面积
    刷题43——最长上升子序列
  • 原文地址:https://www.cnblogs.com/newmiracle/p/11871480.html
Copyright © 2011-2022 走看看