如何用原生js写出滑动下拉菜单_安全

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #menu {
    position: relative;
    background: black;
    width: 150px;
    height: 30px;
    margin: 200px auto;
    overflow: hidden;
}
#sc {
    position: absolute;
    background-color: #80ffff;
    width: 150px;
    height: 120px;
    top: 0;
}
    </style>
    <script>
    </script>
</head>
<body>
    <div id="menu">
        <div id="sc"></div>
    </div>
    <script>
        var menu = documentgetElementById('menu');
        var sc = documentgetElementById('sc');
        var interval;
        function menuscroll() {
            var top = parseFloat(scstyletop) || scscrollTop;
            top += 10;
            scstyletop = top + "px";
        }
        menuonmouseenter = function() {
            interval = setInterval("menuscroll()", 90);
        }
        menuonmouseleave = function() {
            clearInterval(interval);
            scstyletop = 0;
        }
    </script>
</body>
</html>

你是要原生的解决方法吗？如果是的话确实比较麻烦一点差不多是这样的
select1内的内容你已经知道了，选择了之后值发生了变化，这时候监听select变化
//伪代码
widnowaddEventlistener('select1','click',function(){
//循环删除select2子节点
select2removeChild(select2childNodes[i])
//根据select1的value获取select2展示内容
xhrthen(res=>{
//循环res
let item = documentcreateElement('option')
iteminnerHTML = res[i]
select2appendChild(item)
})
})

首先网页中有一个隐藏的所有候选项的列表，然后你在输入框中每次按下按键输入的时候，会触发事件（例如keydown,keyup等），事件里面会执行模糊匹配，依次判断列表中的每个选项是否包含你输入的内容。把包含的选项显示出来就是你看到的效果了
如果没有那很可能是每次你输入内容的时候，触发的事件函数里有ajax请求，向后台服务器查询包含你输入内容的选项，然后服务器返回结果，在页面上动态显示。

其实思路很容易的，先做大导航。然后做下拉菜单，但是下拉菜单默认是display：none;当鼠标指向上边的大导航的项目的时候（mouseover），对应的下拉菜单的CSS样式中的display属性设置为block，mouseout的时候又置为none；

需要先用ajax的方式获取数据库的记录作为数组然后将数组内容加入的下拉框中作为选项

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src=">

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/yw/12645372.html

如何用原生js写出滑动下拉菜单

发表评论

评论列表（0条）