当我点击ul li菜单时，转换不起作用 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

最简单的纯js实现点击展开二级菜单功能

我最近就遇到做个点击展开二级菜单的要求，当然只能用原生的JS去写来实现，我借鉴了网上的一个案例，补充一下，分享一下：如果，默认打开页面进来时二级菜单是隐藏的，需要点击才能展现二级菜单，再点击就是隐藏二级菜单...ul> li> li οnclick="f('sub_menu_2')">一级菜单2 ul id="sub_menu_2"> li>二级菜单2li>...li>二级菜单2li> li>二级菜单2li> li>二级菜单2li> ul> li> li>一级餐单3li> ul> li不能添加a标签，不然会不起作用。...如果，你的页面默认进来二级菜单是展现的，点击时才关闭。直接把style标签的样式display=”none”去掉就可以。同时需要修改一下js。

4.3K2 0

每天一个小技巧：实现自定义右键菜单（Context Menu） contextmenu 事件监听构造菜单显示菜单隐藏菜单

// 菜单点击回调 }] } 通过遍历 options.menus 生成菜单列表，并挂载到 body 中，并最终返回菜单的实例： function createMenu() { const...("li"); li.textContent = menu.name; li.onclick = menu.onClick; ul.appendChild(li);...} } const body = document.querySelector("body"); body.appendChild(ul); return ul; } 创建菜单的主要逻辑就完成了...显示菜单当我们右击页面时，获取到鼠标的坐标，设置菜单为固定定位（position: fixed），并将其左上角位置设置为鼠标坐标，以实现菜单在鼠标点击位置的弹出： function showMenu(...最后，当我们点击页面中的其他区域时需要将菜单隐藏： function hideMenu(e) { const menus = menuSinglton.getInstance(); menus.style.display

6.3K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

利用easyui实现菜单的展示 easyui_tree

ul容器--%> ul id="myTree" class="easyui-tree"> 菜单--%>...li>永辉超市li> ul> li> 菜单信息--%>...li>国美li> ul> li> 菜单--%>...并且我们点击一级菜单的时候，会收回 ? 以上的动态实现就是因为代码的ul标签加了class="easyui-tree"实现的。...现在我们需要做的是，当我们点击一级菜单的时候，会触发的事件是什么 ? 使用这个onclick事件 ? 我们在打印台可以看到 ?

1.6K2 0

html基础语法总结

二.HTML文档结构三.元素 1.按单/双标记划分 2.按块状/行内元素划分 3.块状元素和行内元素的互相转换四.重点 1.图像链接 2.导航菜单 ①列表 ②超链接 3.表单 4.表格 ---...3、当为行内元素进行定位时，absolute(绝对定位)与fixed(固定定位)都会使原先的行内元素变成块级元素。...然后可以在后面继续写文字，此文字就会显示成超链接，点击该文字即可进入超链接。...---- 无序列表 ul li 列表默认的前缀样式是实心圆其实是disc。...ul> li>一li> li>二li> li>三li> ul> ?

1.4K1 0

9.13笔记

一、无序列表(ul) 1.内部必须有子标签li>li> 2.ul自带内外边距，还有一个标签、并集选择器body,ul,p{ ...:none(空）/circle（空心圆）/disc（实心圆）/square（正方形） } 二、Ol有序列表 1.内部必须有子标签li>li> 2.天生自带内外边距 Ol与ul不停之处在于前面的符号...li tyle=”A/a/1/I> 三、自定义列表自定义列表内容小标题列表能做什么？做二级菜单，做导航。...width+border*2+padding*2+margin*2 一个表情的实际高度为height+padding-top+padding-bottom+2*border 两个相邻的块级同时margin时，...二者转换块级转行级（display：inline；）行级转块级（display：block；）行级块元素（display：inline-block；）{可以设置行高、可以在一行、margin可以随意使用

3142 0

JavaScript 实现自定义鼠标右键上下文菜单

（二）contextmenu 事件contextmenu 事件专门用于处理鼠标右键菜单的显示。当用户在页面上点击鼠标右键时，会触发该事件。...例如，当用户在页面的某个特定区域点击右键时，我们可以通过监听 contextmenu 事件，根据该区域的功能特点显示与之相关的自定义菜单。...li id="delete">删除li> ul>在这个例子中，#custom-menu是菜单的容器，.hidden类用于控制菜单的显示和隐藏。...当事件触发时，调用event.preventDefault()阻止默认右键菜单显示。接着，获取鼠标右键点击的位置（event.pageX和event.pageY），并将菜单的位置设置为该位置。...最后，移除.hidden类以显示菜单。另外，我们还监听了click事件，当用户点击页面其他地方时，隐藏自定义菜单。

1011 0

【云+社区年度征文】html基础语法总结

1、display display:block转换为块状元素 display:inline转换为行内元素 display:inline-block转换为行内块状元素注意：如果把一个div设置成inline...3、当为行内元素进行定位时，absolute(绝对定位)与fixed(固定定位)都会使原先的行内元素变成块级元素。...然后可以在后面继续写文字，此文字就会显示成超链接，点击该文字即可进入超链接。... li>ddli> li>aali> li>ddli> [在这里插入图片描述] --- 无序列表 ul li 列表默认的前缀样式是实心圆其实是...ul> li>一li> li>二li> li>三li> ul> [在这里插入图片描述] --- 自定义列表 dl dt dd 自定义列表

1.3K0 0

JavaScript笔记(17)

事件委托的作用我们只操作了一次DOM,提高了程序的性能那我们可以这么做,给ul加上点击事件: 但是我们可以看到点击li的时候也会弹出警示框,这是为什么呢?...也就是说,由于是冒泡阶段,所以是按照 li->ul->body->html->document的顺序查找的,由于在li中没有找到触发事件,就向上一级(ul)寻找触发事件,ul设置了触发事件,所以会弹出警示框...,但由于点击的是li,e.target是li,所以li的背景会变成粉红色....常用的鼠标事件 1.禁止鼠标右键菜单 contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单.比如取消显示框选文本后点击右键的复制这样就不能右键复制了,...,只要按下's'键,光标就能回到搜索框: 贴一下我一开始的做法: 但是出现了问题:当我按下s时,s也被输进去了,这不是我们要的效果这是因为我们一直按着(即使时间很短),所以s也会被输进去

8081 0

【JavaScript】JavaScript开篇基础（5）

event) {} eventTarget.addEventListener('click', function(event) {}）这个event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去当我们注册事件...> li>abcli> li>abcli> li>abcli> ul> // `e.target...例子：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上， ul 有注册事件，就会触发事件监听器。...; // 点li就会出现弹框 e.target.style.backgroundColor = 'pink'; // e.target可以得到我们点击的哪个小li，哪个小li...背景就变粉 }) 7.鼠标事件禁止鼠标右键菜单： contextmenu主要控制应该何时显示上下文菜单，主要用于取消默认的上下文菜单

721 0

CSS+HTML 顶部导航栏实现「建议收藏」

: #111; } .top ul li ul{ /* 设置二级菜单 */ margin-left: -0.2px; background:rgb(189, 181, 181); position...: relative; display: none; /* 默认隐藏二级菜单的内容 */ } .top ul li ul li{ /* 二级菜单li内容的显示 */ float:none;...text-align: center; } .top ul li:hover ul{ /* 鼠标选中二级菜单内容时 */ display: block; } body{ background...; display: none; /* 默认隐藏二级菜单的内容 */ } .top ul li ul li{ /* 二级菜单li内容的显示 */ margin-right:0; float:...none; text-align: center; } .top ul li:hover ul{ /* 鼠标选中二级菜单内容时 */ display: block; }

3.3K3 0

页面刷新跳转的，保持当前选中项高亮

项目开发的时候会遇到这样或者那样的问题，比如，左侧导航栏二级菜单点击之后，跳转新的界面，新的界面的高亮状态是点击时候的状态。 ?...ul class="allnav"> li>li> ul> li> js代码 /* href...//window.location.href对象用于获得当前页面的地址 (URL)， //String() 函数把对象的值转换为字符串...$(this).closest('ul').parent("li").addClass("on").siblings().removeClass("on"); } })

2.5K4 0

React 下拉菜单 Dropdown Menu

外部点击关闭下拉菜单问题：当用户点击下拉菜单外部区域时，下拉菜单不会自动关闭。解决方案：使用 useEffect 和 addEventListener 来监听外部点击事件。...3li> ul> )} ); }; export default Dropdown; 2....选项点击事件问题：需要在选项点击时执行特定的操作。解决方案：为每个选项添加点击事件处理器。...忽视外部点击关闭易错点：忘记处理外部点击事件，导致下拉菜单无法正常关闭。避免方法：使用 useEffect 和 addEventListener 监听外部点击事件。 2....避免方法：确保选项数据在组件重新渲染时正确传递。 3. 选项点击事件未绑定易错点：选项点击事件未绑定，导致无法执行特定操作。避免方法：为每个选项添加点击事件处理器，并确保事件处理器正确传递参数。

1251 0

vue中keep-alive、activated的探讨和使用「建议收藏」

= document.getElementsByClassName("content")[0]; let li = document.createElement("li"); li.innerHTML...= "我是添加的元素"; ul.appendChild(li); } } }; Jetbrains全家桶1年46，售后保障稳定...代码不用解释了吧，就是点击按钮在ul动态添加一个li元素。...但如果该组件中没有使用缓存，也就是没有被包裹的话，activated是不起作用的。我们直接来试一下就知道了。...简单的说activated()函数就是一个页面激活后的钩子函数，一进入页面就触发；所以当我们运用了组件缓存时，如果想每次切换都发送一次请求的话，需要把请求函数写在activated中，而写在created

1.6K1 0

创意卡片式项目管理界面UI设计源码

-- .cd-primary-nav --> ul> li class="single-project"> li> ul> <!.../img/img-1.jpg); } 当某个项目被选择的时候，该项目被添加一个.selected class，该class应用了一个translateY(0)转换。...，开始时.cd-primary-nav元素被放置在.cd-projects-container的下面。...当用户点击了.cd-nav-trigger按钮之后，所有的项目被移动到屏幕的下方，这时全屏导航菜单被显示出来。

1.6K2 0

JS-事件之鼠标、键盘都能控制的下拉选框效果

="5">Java特效li> ul> body,ul,li{ margin:0; padding:0;...:none; padding-left:10px; padding-right:10px;} 任务一、点击菜单中的向下三角展开菜单提示: 1、点击三角时需阻止事件冒泡...，显示选中项提示: 1、声明一个全局的index变量初值为-1 2、按下向下方向键时index递增，当递增至大于等于菜单选项的总数时恢复为0 3、按下向上方向键时判断index，如若小于等于0则设为菜单选项的总数...，之后递减index 4、根据index值将对应的选项设为当前（灰色背景） 5、按下回车键时将对应选中的选项设为菜单标题，且将所有选项设为无背景，index恢复为-1，菜单收起注意：没有任何选项被选中时...，按下回车键不做任何操作三、鼠标滑过每个选项时高亮显示，离开时去掉背景，点击高亮选项时菜单标题改变提示: 1.遍历所有a标签，绑定鼠标点击的事件注意：要考虑到浏览器兼容，使用innerHTML

3.2K5 0

界面组件之导航菜单备案

li> ul> 界面组件二、纵向导航菜单 ?...="#">Contactli> ul> 界面组件四、三级菜单 ?...*/ } .multi_drop_menu a:active { /*点击时背景变色*/ background:#fff; /*点击时文本变色*/ color:#ccc; } /*添加功能样式...; /*左边与父菜单项对齐*/ left:0; /*顶边与父菜单项底边对齐*/ top:100%; } .multi_drop_menu li:hover > ul { /*父元素悬停时显示...} .multi_drop_menu.vertical li ul { /*子菜单左边与上一级菜单右边对齐*/ left:100%; /*子菜单顶边与上一级菜单项顶边对齐*/ top:0;

1.9K1 0

能用HTMLCSS解决的问题就不要使用JS！

导航高亮导航高亮是一种很常见的问题，包括当前页面的导航在菜单里面高亮和hover时高亮。你可以用js控制，但是用一点CSS技巧就可以达到这个目的，不需要使用JS。...鼠标悬浮时显示鼠标悬浮的场景十分常见，例如导航的菜单：以及在《Google地图开发总结》一文提到的，marker详情框的显示：一般要把隐藏的东西如菜单作为hover目标的子元素或者相邻元素，才方便用...css控制，例如上面的菜单，是把menu当作导航的一个相邻元素： li class="user">用户li> li class="menu"> ul> li>账户设置li> li>登出li> ul> li> menu在正常态下是隐藏的： .menu{ display: none; } 而当导航hover时显示： .user:hover...ul> li>1li> li>2li> li>3li>ul> 第5行的意思就是选择li的第一个元素，并且它是倒数第二个元素，第6行的意思是选择前面有是第一个且是倒数第二个

3K2 0

jq模拟select下拉框，自定义option的css样式

因为option是html固有元素；因而无论怎么修改在浏览器上都是不起作用的。想修改option样式，只能通过div ul li模拟select功能；功能如下，具体细节可以自己再调节。 li>VMC650li> li>VMC850li> li>VMC1160li> li...>VMC1580li> li>其他li> ul> .select{ /*演示用，页面body有内容时... { padding:0; } .option ul li { list-style:none; width:100%; line-height:45px; height:45px; padding-left... //option下拉框 $('.choose').click( function () { console.log("a") $('.option').toggle(); }); //点击

2.6K2 0

能用HTMLCSS解决的问题就不要使用JS

导航高亮导航高亮是一种很常见的问题，包括当前页面的导航在菜单里面高亮和hover时高亮。你可以用js控制，但是用一点CSS技巧就可以达到这个目的，不需要使用JS。 ? ?...注意这个hover选择器特别好用，几乎适用于所有需要用鼠标悬浮时显示的场景。 2. 鼠标悬浮时显示鼠标悬浮的场景十分常见，例如导航的菜单： ?...一般要把隐藏的东西如菜单作为hover目标的子元素或者相邻元素，才方便用css控制，例如上面的菜单，是把menu当作导航的一个相邻元素： li class="user">用户li>li class...="menu"> ul> li>账户设置li> li>登出li> ul>li> menu在正常态下是隐藏的： .menu{ display...ul> li>1li> li>2li> li>3li>ul> 第5行的意思就是选择li的第一个元素，并且它是倒数第二个元素，第6行的意思是选择前面有是第一个且是倒数第二个

3.8K4 0

JQuery 入门 - 附案例代码

当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中，等前面的动画完成后再开始执行。...“javascript:void(0);”>二级菜单3li> ul> li> li> 一级菜单1 ul...>二级菜单2li> li>二级菜单3li> ul> li> ul> 二级菜单3li> ul> li> li> 一级菜单1 ul...>二级菜单2li> li>二级菜单3li> ul> li> ul> </body

13.9K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭