jquery实现比较靠谱的手风琴代码

比较靠谱的手风琴代码

<!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>

原创文章如转载,请注明本文链接: http://newmiracle.cn/?p=1323

发表评论

电子邮件地址不会被公开。 必填项已用*标注