首页手记 web组件之下拉菜单（CSS3手风琴效果）

web组件之下拉菜单（CSS3手风琴效果）

标签：

JQuery JavaScript CSS3

关于下拉菜单，大家应该都不陌生，html里有select标签，就可以提供下拉效果，当然也可以结合ul ol 有序、无序的列表做一些定制的下拉列表，今天和大家分享一下jQuery+css3，实现的下拉效果。（内附js的版本，奈何js做出来的动画效果实在不咋地，所以之做给大家参考。）

在jQuery中有一个上卷下拉的方法:slideToggle()，动画效果相当棒，慕课网的jQuery教程里也有相关讲解，感兴趣的小伙伴可以研究一下。

jQuery版本：main.js 代码如下：

$(function(){
    var PutDown = function(el,tag){
        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);
})

JavaScript版本：index_1.js 代码如下：

function g(oid){
    if(!document.getElementsByClassName) return false;
    return document.getElementsByClassName(oid);
}
;(function(){
    var container = g('link');
    var tag = null;
    console.log(container.length);
    for(var i = 0;i<container.length;i++){
        container[i].onclick=function(){
            var _this_ = this;
            console.log(this.parentNode.getElementsByTagName('ul')[0].style.display);
            var showEle = _this_.parentNode.getElementsByTagName('ul')[0];
            /*this.nextSibling.style.display = 'block';*/
            if(tag!=null){
                if(tag == this){
                    this.style.color = '#292421';
                    showEle.style.display = '';
                    tag = null
                }
                else{
                    setTimeout(function(){
                    tag.style.color = '#292421';
                    tag.parentNode.getElementsByTagName('ul')[0].style.display = '';
                    tag = _this_;},50)
                    setTimeout(function(){
                        _this_.style.color = '#ED9121';
                        showEle.style.display = 'block';
                    },500)
                }

            }
            else if(showEle.style.display == ''){
                setTimeout(function(){
                _this_.style.color = '#ED9121';
                showEle.style.display = 'block';
                tag = _this_;},500)
            }
            else{
                setTimeout(function(){
                this.style.color = '#ED9121';
                showEle.style.display = 'block';
                tag = _this_;},500)
            }

        }
    }
})()

Html代码如下：

<!DOCTYPE html>
<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">
    <link rel="stylesheet" href="css/main.css" type = "text/css">
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-1.11.0.min.js"></script>
</head>
<body>
    <!-- [if lte IE 8]>

    <p>您的浏览器版本过低，请到<a href = "http://browsehappy.com">这里</a>更新</p>

    <![ end if ] -->
    <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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/main.js"></script>

</html>

演示地址：
https://marlborokay.github.io/slideDown/

main.js 接口地址：
https://github.com/marlboroKay/slideDown

点击查看更多内容