【jquery】【Dropdown】过度下拉框如何实现

最新推荐文章于 2024-02-25 14:11:44 发布

原创最新推荐文章于 2024-02-25 14:11:44 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

JavaScript学习专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript实现下拉菜单的过渡效果，包括鼠标点击和鼠标悬停两种触发方式，通过调整高度和透明度实现平滑过渡。

鼠标点击（click）实现效果：

如下图，从点击Dropdown有一个下拉过度的过程，这个也是很多OA系统用到的一个前端技术了，有兴趣的可以看一下哈
在这里插入图片描述

代码

css代码：
    .dropdown {
        width: 44px;
        height: 20px;
    }

        .dropdown a {
            text-decoration: none;
            color: #000;
            display: inline-block;
        }

        .dropdown > a {
            border: 1px solid #000;
            padding: 6px 12px;
        }


        /*//点击不实现过度*/
    /*.dropdown-menu {

        display:none;
        width: 200px;      
        list-style: none; 
        margin: 0;
        padding: 0;
        border: 1px solid #aaa;
        box-shadow: 5px 5px 6px #000;
    }*/
    .dropdown-menu {
        width: 150px;
        height: 153px;
        opacity: 0;
        overflow: hidden;   /*果内容溢出一个元素的框，会发生什么。*/
        list-style: none;
        margin: 0;
        padding: 0;
        /*border: 1px solid #aaa;*/
        box-shadow: 5px 5px 6px #000; /*阴影*/
        transition: all .5s linear; /*过度功能 无论是透明还是大小*/  
    }

        .dropdown-menu a {
            padding: 6px 10px;
            width: 160px;
        }

        .dropdown-menu li:hover {
            background: #ddd;
        }

body里的内容

<body> 
<h1>下拉菜单</h1>
 <div class="dropdown">
     <a data-trigger="dropdown" href="#">Dropdown</a>
     <ul class="dropdown-menu">
         <li>
             <a href="#">选项一</a>
         </li>

         <li>
             <a href="#">选项二</a>
         </li>
         <li>
             <a href="#">选项三</a>
         </li>

         <li>
             <a href="#">选项四</a>
         </li>

     </ul>
 </div>

<script src="../js/jquery.js"></script>
<!--//单机按钮下拉
//找到data-trigger属性为dropdown的元素，绑定单机事件-->
<script>
    $("[data-trigger=dropdown]").click
        (function (e) {
        e.preventDefault();
        //封装this为jQuery对象$a
        var $a = $(this);
        //找到$a的下一个元素，保存在menu中
        var $menu = $a.next();      //.nextElementSibling
        
        if ($menu.css("height")=="153px") {
	   $menu.css({ height: 0, opacity:0}
        }
        else {
        //jquery一次修改多个属性
            $menu.css({ height: 153, opacity:1 });
            
            //$menu.css("height", 153);
            //$menu.css("opacity", 1);
        }
    })
</script>
</body>

鼠标进入（mouseover）实现效果：

在这里插入图片描述

css代码和上边一样，就下边的js代码不同：

<script>
//应该是父元素
    $("[data-trigger=dropdown]").parent().mouseover(
        function () {
            var $div = $(this);
            var $menu = $div.children().last();  //这里就是ul了，很巧妙
            $menu.css({ height:153, opacity: 1 });
        }
    ).mouseout(function () {
        var $div = $(this);
        var $menu = $div.children().last();
        $menu.css({ height: 0, opacity: 0 });
    })
</script>