登录 用户中心() [退出] 后台管理 注册
   
您的位置: 首页 >> SoftHub关联区 >> 主题: 原生js实现下拉菜单[zt]     [回主站]     [分站链接]
原生js实现下拉菜单[zt]
clq
浏览(222) - 2018-12-09 17:12:12 发表 编辑

关键字: js_menu

[2018-12-09 17:16:11 最后更新]
原生js实现下拉菜单[zt]

https://www.cnblogs.com/0dhw/p/7827418.html

<style>
        .one li{ width:100px; height:30px; line-height:30px; background:url(nav/libg.jpg) no-repeat; float:left; text-align:center; margin-left:10px; cursor:pointer; _display:inline; position:relative;}
        li ul{ position:absolute; left:0; top:30px; display:none;}
</style>
<ul class="one">
        <li id="li01">
            <span>一级菜单</span>
            <ul id="ul01">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li id="li02">
            <span>一级菜单</span>
            <ul id="ul02">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li id="li03">
            <span>一级菜单</span>
            <ul id="ul03">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
   
 <script type="text/javascript">   
    function fn(canshu1,canshu2){
    var li01 = document.getElementById(canshu1);
    var ul01 = document.getElementById(canshu2);
   
    li01.onmouseover = function(){
        ul01.style.display = "block"   
    }
    li01.onmouseout = function(){
        ul01.style.display = "none"   
    }
}
fn("li01","ul01")   
fn("li02","ul02")   
fn("li03","ul03")

 </script>
 
 






clq  2018-12-09 17:16:11 发表 编辑

更改整个类别下的所有 dom 的 css 的话则是类似如下的代码:

    $(".navigation_bg li").each(function () {
        $(this).hover(function () {
            $(this).addClass("onnav").siblings().removeClass("onnav");
            $(this).find(".subNav").show();
        }, function () {
            $("#nav" + navID).addClass("onnav").siblings().removeClass("onnav");
            $(this).find(".subNav").hide();
        });
    });



总数:1 页次:1/1 首页 尾页  
总数:1 页次:1/1 首页 尾页  


所在合集/目录



发表评论:
文本/html模式切换 插入图片 文本/html模式切换


附件:



NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.

Copyright © 2005-2020 clq, All Rights Reserved
版权所有
桂ICP备15002303号-1