找回密码
当前位置：前端开发者 > jQuery > 正文

jQuery简单手风琴

2018-07-12 分类：jQuery 阅读(682) 评论(0)

javascript jquery 交互式web前端开发|java前端开发jquery|jquery前端开发框架

当内容向上收起的时候，当前点击的“+”怎么才能变成“-”？

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>国内 前端开发框架:手风琴</title>
    <style>
        .wrap {
            width: 200px;
            height: auto;
            margin: 50px auto;
            border-radius: 5px
        }
        ul,
        li,
        h4 {
            list-style: none;
            margin: 0;
            padding: 0
        }
        .wrap>ul {
            border-radius: 5px
        }
        .wrap>ul>li {
            background: #E4644B;
            text-align: center;
            border-bottom: solid 1px #DED1D1;
            color: #fff;
            cursor: pointer;
            position: relative;
        }
        .wrap>ul>li:last-child {
            border-bottom: none;
        }
        .wrap>ul>li h4 {
            padding: 8px 0;
        }
        .wrap>ul li span {
            position: absolute;
            top: 5px;
            right: 12px;
            font-size: 22px;
            color: #fff;
            display: inline-block;
        }
        .wrap>ul>li .child-ul {
            background: #fff;
            display: none;
        }
        .wrap>ul>li .child-ul li {
            color: #000;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div class=”wrap”>
        <ul class=”menu”>
            <li>
                <h4>软件培训</h4>
                <span>+</span>
                <ul class=”child-ul”>
                    <li>java</li>
                    <li>web前端</li>
                    <li>安卓开发</li>
                    <li>软件测试</li>
                </ul>
            </li>
            <li>
                <h4>游戏动漫</h4>
                <span>+</span>
                <ul class=”child-ul”>
                    <li>java</li>
                    <li>web前端</li>
                    <li>安卓开发</li>
                    <li>软件测试</li>
                </ul>
            </li>
            <li>
                <h4>电商培训</h4>
                <span>+</span>
                <ul class=”child-ul”>
                    <li>淘宝</li>
                    <li>天猫</li>
                    <li>京东</li>
                    <li>苏宁易购</li>
                </ul>
            </li>
            <li>
                <h4>营销培训</h4>
                <span>+</span>
                <ul class=”child-ul”>
                    <li>seo</li>
                    <li>微信营销</li>
                    <li>网络创业</li>
                    <li>市场营销</li>
                </ul>
            </li>
        </ul>
    </div>
    <script src=”http://libs.baidu.com/jquery/1.9.0/jquery.js”></script>
    <script type=”text/javascript”>
        var flag = true;
        $(function () {
            $(“.wrap>ul>li”).on(“click”, function () {
                var next = $(this).children(“.child-ul”);
                var icon = $(this).children(“span”);
                icon.html(“-“);
                next.slideToggle(‘fast’);
                $(‘.child-ul’).not(next).slideUp(‘fast’);//不是当前点击的内容全部向上收起
                $(‘.wrap>ul>li’).children(“span”).not(icon).html(“+”);
                return false;
            })
        })
    </script>
</body>
</html>

web前端开发教程标准|前端移动端开发 模板|jui 前端开发框架

赞(0)
前端开发者 » jQuery简单手风琴
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论