经典下拉式菜单 js+css 实现

最新推荐文章于 2024-05-16 10:56:48 发布

hpugym

最新推荐文章于 2024-05-16 10:56:48 发布

阅读量630

点赞数

分类专栏： Web开发

本文链接：https://blog.csdn.net/hpugym/article/details/47317795

版权

Web开发专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>s</title>
<style type="text/css">
#a,#b,#c{display:none; margin-left:10px;}
ul{list-style:none;margin:0;}
</style>
<script type="text/javascript">
function aaa(){
    var a=document.getElementById("a");
    var link1=document.getElementById("link1");
    link1.οnclick=function(){
        if(a.style.display=="block")
           a.style.display="none";
        else
           a.style.display="block";
    }
//     link1.οnmοuseοut=function(){
//          a.style.display="none";
//     }

    var b=document.getElementById("b");
    var link2=document.getElementById("link2");
    link2.οnclick=function(){
   	  if(b.style.display=="block")
         b.style.display="none";
      else
         b.style.display="block";
    }
//     link2.οnmοuseοut=function(){
//          b.style.display="none";
//     }

    var c=document.getElementById("c");
    var link3=document.getElementById("link3");
    link3.οnclick=function(){
   	  if(c.style.display=="block")
         c.style.display="none";
      else
         c.style.display="block";
    }
//     link3.οnmοuseοut=function(){
//          c.style.display="none";
//     }
}
window.οnlοad=function(){
    aaa();
}
</script>
</head>
<body>
  <ul>
   <li id="link1">菜单一
       <ul id="a">
         <li>选项一</li>
         <li>选项二</li>
         <li>选项三</li>
       </ul>
   </li>
   <li id="link2">菜单二
      <ul id="b">
         <li>选项一</li>
         <li>选项二</li>
         <li>选项三</li>
      </ul>
   </li>
   <li id="link3">菜单三
      <ul id="c">
         <li>选项一</li>
         <li>选项二</li>
         <li>选项三</li>
      </ul>
   </li>
  
  </ul>
</body>
</html>

hpugym

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
经典下拉式菜单 js+css 实现

s#a,#b,#c{display:none; margin-left:10px;}ul{list-style:none;margin:0;}function aaa(){ var a=document.getElementById("a"); var link1=document.getElementById("link1"); link1.onclick=f
复制链接

扫一扫

专栏目录