weixin_45994861
2020-06-12 23:27
采纳率: 28.6%
浏览 89

css3的下拉框的制作问题?

    <style type="text/css">
        *{margin: 0px; padding: 0rem;}

   ul li{width: 6.25rem; height: 2.5rem;float: left; list-style: none; background-color: #00FFFF; margin-right: 1.25rem; text-align: center; line-height: 2.5rem;
  border-radius: 1.25rem; }




   li:hover{color: #7FFF00;} 
   li ul{display: none;}
   li:hover ul{display: block;}



    </style>
    <ul id="ullist">
            <li>one  
                 <ul id="list">
                    <li>one</li>
                    <li>one </li>
                    <li>one</li>
                 </ul>
                 </li>
          <!-- 二级下拉菜单 -->
           <li>one</li>
        <li>one</li>
        <li>one</li>
        </ul>

这样写出一个下拉框在仅有在鼠标移到指定的位置才能,显示有什么办法,能够使它改成点击出现,再点击消失呢?刚刚学习前端,希望有懂的大佬指点一下

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • 菜鸟咸鱼一锅端 2020-06-18 13:53
    已采纳

    使用事件委托,定义一个变量,点击切换

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <title>the final project</title>
        <link rel="stylesheet" href="css/finalproject.css" />
        <script src="js/finalproject.js"></script>
        <style>
            *{margin: 0px; padding: 0rem;}
    
    ul li{width: 6.25rem; height: 2.5rem;float: left; list-style: none; background-color: #00FFFF; margin-right: 1.25rem; text-align: center; line-height: 2.5rem;
    border-radius: 1.25rem; }
    
    
    
    
    /* li:hover{color: #7FFF00;}  */
    li ul{display: none;}
    /* li:hover ul{display: block;} */
    
        </style>
    </head>
    
    <body class="bkgimg">
        <center>
    
            <ul id="ullist" onclick='clickfunc()'>
                <li>one  
                     <ul id="list">
                        <li>one</li>
                        <li>one </li>
                        <li>one</li>
                     </ul>
                     </li>
              <!-- 二级下拉菜单 -->
               <li>one</li>
            <li>one</li>
            <li>one</li>
            </ul>
    
        </center>
        <script>
            var b = true
            function clickfunc(ev) {
                console.log('----',ev)
                var ev = ev || window.event;
                var oLi = ev.srcElement || ev.target;
                if(oLi.nodeName.toLowerCase() == 'li'){
                    console.log(oLi.children[0].style)
                    if(b){
                        oLi.children[0].style = "display:block"
                    }else{
                        oLi.children[0].style = "display:none"
                    }
                }      
                b=!b
            }
        </script>
    </body>
    
    </html>
    

    使用jq的话直接使用toggle()方法

    点赞 评论
  • undo1996 2020-06-15 11:48

    可以写个点击事件,改变class名,通过css来显示隐藏

    点赞 评论

相关推荐 更多相似问题