SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单2</title>
    <style>
        * {margin: 0;padding: 0;line-height: 1;list-style: none;text-decoration: none;color: #333;}
        .select{position: relative;border: 1px solid #ccc; display: inline-block; padding: 10px; cursor: pointer; width: 180px; box-sizing: border-box; border-radius: 5px;}
        .select p{line-height: 20px; position: relative;}
        /* 纯三级 */
        /* .select p::after{content: "";display: inline-block;border: 5px solid ; border-color: #333 transparent transparent transparent; margin-left: 5px; vertical-align: middle;} */
        /* 空心三角 */
        .select p::before{content: "";display: inline-block;border: 6px solid ; border-color: #333 transparent transparent transparent; position: absolute; right: 0px; top: 50%; margin-top: -4px; transition: all ease-in-out .3s; transform-origin: 5px 3px;}
        .select p::after{content: "";display: inline-block;border: 6px solid ; border-color: #fff transparent transparent transparent; position: absolute; right: 0px; top: 20%; transition: all ease-in-out .3s; transform-origin: 5px 3px;}
        .select p.rotate::before,.select p.rotate::after{transform: rotateZ(-180deg);} 
        .select p.rotate::after{top: 40%;}
        .select ul{position: absolute; left: 0px; top: 40px; padding: 5px 0px; width: 100%; border: 1px solid #ccc; border-radius: 5px; margin-top: 10px; display: none;}
        .select ul li{ padding: 10px; margin: 5px 0px; transition: all ease-in-out .1s; cursor: pointer;}
        .select ul li.active-option{background: #f5f7fa;}
    </style>
</head>
<body>
    <div class="select">
        <p><span data-url="baidu.com">百度搜索</span></p>
        <ul>
            <li class="active-option"><span data-url="baidu.com">百度搜索</span></li>
            <li><span data-url="google.com">谷歌搜索</span></li>
            <li><span data-url="chaoxin.com">超星检索</span></li>
            <li><span data-url="zhiwang.com">知网检索</span></li>
        </ul>
    </div>
        <div class="select">
        <p><span data-url="baidu.com">百度搜索</span></p>
        <ul>
            <li class="active-option"><span data-url="baidu.com">百度搜索</span></li>
            <li><span data-url="google.com">谷歌搜索</span></li>
            <li><span data-url="chaoxin.com">超星检索</span></li>
            <li><span data-url="zhiwang.com">知网检索</span></li>
        </ul>
    </div>
        <div class="select">
        <p><span data-url="baidu.com">百度搜索</span></p>
        <ul>
            <li class="active-option"><span data-url="baidu.com">百度搜索</span></li>
            <li><span data-url="google.com">谷歌搜索</span></li>
            <li><span data-url="chaoxin.com">超星检索</span></li>
            <li><span data-url="zhiwang.com">知网检索</span></li>
        </ul>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        $(function(){
            $('.select').click(function(){
                $(this).find('ul').slideToggle(300,'swing');
                $(this).find('p').toggleClass('rotate');
            })
            $('.select ul').on('mouseover','li',function(event){
                if(event.target !== this) return;
                $(this).addClass('active-option').siblings().removeClass('active-option');
            })
            $('.select ul').on('click','li',function(event){
                var _this = $(this);
                if(event.target !== this) _this = $(event.target).parents('li');
                var targetParent = $(this).parents('.select')
                var val = _this.html();
                targetParent.find('p').html(val);
            })
        })
    </script>
</body>
</html>