jQuery练习-dropdown控件（下拉菜单）的实现

作者: 讲武德的年轻人 | 来源:发表于2019-12-18 00:03 被阅读0次

jQuery练习-dropdown控件（下拉菜单）的实现
dash(2)--可使用的组件
element-ui Dropdown 传多个参数
2019-01-15下拉选项框
总结《茶韵》中踩的坑（已解决）
CSS下拉菜单
Spinner+Adapter
2019-04-11 下拉菜单（2）
Unity UGUI系列八 Dropdown
MD的web框架之一Materialize_Components

实现效果如下：

1. 简单实现：鼠标点击就出来，再点击就回去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dropdown控件</title>
    <script src="js/jquery-1.12.4.js"></script>
    <style type="text/css">
        body,div,ul,li{
            margin: 0;
            padding: 0;
        }
        body{
            padding:8px;
        }
        .dropdown a{
            text-decoration: none;
            color:#000;
            display: inline-block;
        }
        .dropdown>a{
            border:1px solid #000;
            padding: 6px 12px;
        }
        .dropdown-menu{
            list-style: none;
            width: 200px;
            height: 0;
            opacity: 0;
            border:1px solid #000;
            box-shadow: 5px 5px 6px #000;
        }
        .dropdown-menu a{
            padding: 6px 12px;
            widows: 160px;
        }
        .dropdown-menu li:hover{
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div class="dropdown">
        <a href="#" data-trigger="dropdown">Dropdown</a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another Action</a></li>
            <li><a href="#">Something else</a></li>
            <li><hr /></li>
            <li><a href="#">Separted link</a></li>
        </ul>
    </div>
    <script type="text/javascript">
        // 1.找到dropdown，绑定单击事件
        $('.dropdown>a[data-trigger=dropdown]').click(function(e){
            e.preventDefault();
        // 2.在单击事件里面：找到a后面的元素ul，控制ul的高度和透明度
            var $a = $(this);
            var $ul = $a.next();
            // 判断当前ul的高度，以便于下一步操作
            if(parseInt($ul.css('height')) >0 ){
                $ul.css({
                    'height':0,
                    'opacity':0
                });
            }else{
                $ul.css({
                    'height':153,
                    'opacity':1
                })    
            }
        });
        // 
    </script>
</body>
</html>

2. 简单实现：鼠标移上去就出来

添加一下js代码即可：

$('.dropdown>a[data-trigger=dropdown]').mouseover(function(e){
    var $a = $(this);
    var $ul = $a.next();
    $ul.css({
        'height':153,
        'opacity':1
    })
}).$('.dropdown>a[data-trigger=dropdown]').mouseout(function(e){
    var $a = $(this);
    var $ul = $a.next();
    $ul.css({
            'height':0,
            'opacity':0
        })
});