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

前端开发手风琴组件

2018-12-12 分类：JavaScript 阅读(670) 评论(0)
模块化开发 前端
前端模块化开发费用
前端开发 模块化

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title>手风琴demo</title>
        <meta name=”viewport” content=”width=device-width,initial-scale=1.0″ />
        <meta name=”description” content=”Fengqin_Demo” />
        <script
            type=”text/javascript”
            src=”http://libs.baidu.com/jquery/2.0.0/jquery.js”
        ></script>
        <style>
            * {
                margin: 0;
                padding: 0;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }
            body {
                background: #191970;
                font-family: ‘Open Sans’, Arial, Helvetica, Sans-serif, Verdana,
                    Tahoma;
            }
            ul {
                list-style: none;
            }
            a {
                color: #ff4500;
                text-decoration: none;
            }
            .container {
                width: 100%;
                max-width: 300px;
                margin: 20px auto 30px;
                border-radius: 4px;
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                background: #fff;
            }
            .container .link {
                cursor: pointer;
                color: #292421;
                padding: 15px 15px 15px 50px;
                font-size: 14px;
                font-weight: 700;
                border-bottom: 1px solid #ccc;
                -webkit-transition: all 0.4s ease;
                -o-transition: all 0.4s ease;
                transition: all 0.4s ease;
            }
            .container li.open .link {
                color: #ed9121;
            }
            .container li:last-child .link {
                border-bottom: 0;
            }
            .desc {
                background: #3d59ab;
                font-size: 14px;
                display: none;
            }
            .desc li {
                border-bottom: 1px solid #ccc;
            }
            .desc li:last-child {
                border-bottom: 0;
            }
            .desc a {
                display: block;
                padding: 12px;
                padding-left: 50px;
                color: #808a87;
                -webkit-transition: all 0.25s ease;
                -o-transition: all 0.25s ease;
                transition: all 0.25s ease;
            }
            .desc a:hover {
                background: #1e90ff;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <ul class=”container”>
            <li>
                <div class=”link”>html</div>
                <ul class=”desc”>
                    <li><a href=”#”>html</a></li>
                    <li><a href=”#”>css</a></li>
                </ul>
            </li>
            <li>
                <div class=”link”>Javascript</div>
                <ul class=”desc”>
                    <li><a href=”#”>Javascript</a></li>
                    <li><a href=”#”>JQuery</a></li>
                    <li><a href=”#”>Zepto</a></li>
                    <li><a href=”#”>Require</a></li>
                </ul>
            </li>
            <li>
                <div class=”link”>Browser</div>
                <ul class=”desc”>
                    <li><a href=”#”>Firefox</a></li>
                    <li><a href=”#”>Chrome</a></li>
                    <li><a href=”#”>Safari</a></li>
                </ul>
            </li>
            <li>
                <div class=”link”>Author</div>
                <ul class=”desc”>
                    <li><a href=”#”>Walk Monkey</a></li>
                    <li><a href=”#”>Marlboro</a></li>
                </ul>
            </li>
        </ul>
    </body>
    <script>
        $(function() {
            var PutDown = function(el, tag) {
                var _this_ = this
                this.el = el || {}
                this.tag = tag || false
                var link = this.el.find(‘.link’)
                link.on(‘click’, { el: this.el, tag: this.tag }, this.dropDown)
                console.log(link)
            }
            PutDown.prototype = {
                dropDown: function(e) {
                    var $el = e.data.el,
                        $tag = e.data.tag,
                        $this = $(this),
                        $next = $this.next()
                    console.log($next)
                    $next.slideToggle()
                    $this.parent().toggleClass(‘open’)
                    if (!$tag) {
                        //不是当前点击的向上收起
                        $el.find(‘.desc’)
                            .not($next)
                            .slideUp()
                            .parent()
                            .removeClass(‘open’)
                    }
                },
            }
            var putdown = new PutDown($(‘.container’), false)
        })
    </script>
</html>
前端模块化开发事例
前端模块化开发暴露
前端工程化_模块化开发方式
赞(0)
前端开发者 » 前端开发手风琴组件
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论