weixin_45994861 2020-06-12 23:27 采纳率: 50%
浏览 92
已采纳

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()方法

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

  • HTML/CSS下拉框制作[项目代码]
    2025-11-23 09:55
    在本文的最后，作者总结了制作下拉框的几个关键点，为读者提供了便于理解的技术要点。这些关键点包括理解下拉框的工作原理、掌握`position`属性的使用方法、合理安排下拉菜单的层级关系以及优化用户的交互体验等。...
  • CSS——下拉框的制作（以小米商城为例）
    2022-07-08 16:55
    Bonsoir777的博客 本文主要介绍了下拉框的实现过程（以小米商城为例），以及display:none和visibiliy：hidden的区别。
  • web前端：CSS3制作炫酷的下拉框
    2019-04-19 16:26
    首席前端开发深套的博客 CSS3炫酷的下拉框的原理： 1.首先就是一个导航下拉，就是鼠标放上去出现一个下拉列表 2.然后发现，下拉里面，每一个选项是从不同的两个方向出现的 3.出现的方式是奇数项从左边进，偶数项从右边进，进入方式是滑动...
  • 5多选下拉框样式_如何利用CSS3制作炫酷的下拉框
    2021-01-13 11:50
    李毛墩的博客 接下来我就给展示一个css3制作一个炫酷下拉框。其实不只是这些，还有很多。CSS3是CSS(层叠样式表)技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接...
  • 前端开发面试题—CSS3新增特性
    2022-09-01 01:32
    黛琳ghz的博客 CSS3是CSS（层叠样式表）技术的升级版本，在CSS2.1的基础上增加了很多强大的新功能，以帮助开发人员解决一些实际面临的问题。使用CSS3不仅可以设计炫酷美观的网页，还能提高网页性能。CSS3的新特征有很多，例如圆角...
  • 第八章 利用CSS制作导航菜单栏
    2024-11-13 19:47
    业余绳匠的博客 底部导航栏 首页 前端 后台 移动应用 8.3.1 导航栏的创建 底部导航，顾名思义是放在页脚部位，是网站设计中一种辅助导航。底部导航应用性不是很广，比较常出现在一些活动或个性化的网站当中。...
  • CSS 如何制作下拉菜单
    2022-02-23 14:50
    CyberPlayer的博客 我们用了 CSS box-shadow 属性，而不是边框，这样下拉菜单看起来像一张“卡片”。 当用户将鼠标移到下拉按钮上时，:hover 选择器用于显示下拉菜单。 下拉按钮 如果希望下拉菜单从右到左而不是从左到右，添加 ...
  • 前端-js例子：下拉框（事件传播机制）
    2024-09-18 18:14
    Lojarro的博客 ：鼠标离开下拉框消失，但是标签下面空白处悬停下拉框还是会出现。2. js延迟加载 等整个文档加载完执行 内嵌外引都可用。或者在body元素的最后外引，实现元素的加载。当点击上面的菜单选项时，要出现下拉框。首先，...
  • 如何用css绘制一个三角形？
    2022-11-28 17:35
    巷子里的老张先生的博客 通常我们在开发过程中，像一些播放器的暂停按钮、或者是一些下拉框等等，都会用到三角形。一般我们会使用一些svg或者是icon图标来替代，那么有没有想过该怎么去绘制一个三角形呢？废话多说，接下来跟着咱们步伐一步...
  • jQuery制作简洁的多级联动Select下拉框
    2020-10-25 00:48
    在这个给定的文件中，标题表明文章的主题是利用jQuery制作一个多级联动的Select下拉框。描述部分则强调了此类下拉框实现方式的多样性和本教程代码的简洁性及兼容性。标签部分指出了文章的重点技术点：jQuery、多级...
  • 《1000种前端特效制作与应用技巧全集》
    2025-06-27 12:04
    同时，掌握 CSS3 动画和过渡效果可以让二维码的生成过程更加生动有趣。 jQuery 省市区三级联动 这个特效主要用于表单中的地址选择功能。当用户选择省份时，下拉框会动态更新为对应的城市列表；选择城市后，再更新为...
  • 网页制作与设计(HTML+CSS)测试试卷.pdf
    2021-11-20 07:47
    网页制作与设计（HTML+CSS）测试试卷 本测试试卷涵盖了 HTML 和 CSS 的基础知识，旨在考察考生对网页制作与设计的理解和应用能力。试卷共分为选择题和简答题两部分，涵盖了 HTML 文档结构、标签、超链接、表单、CSS...
  • CSS3新增特性
    2022-09-01 12:43
    Aria85的博客 语法值描述背景图像填充框的相对位置border-box背景图像边界框的相对位置背景图像的相对位置的内容框CSS3中background-clip背景剪裁属性是从指定位置开始绘制。语法值说明border-box默认值。背景绘制在边框方框内...
  • 没有解决我的问题, 去提问