如何使用jquery使子菜单出现？
[英]how can I make sub-menu appears using jquery?
问题描述
I am desperately trying to make sub-menu appears under menu-item below when I hover a mouse. 
当我将鼠标悬停在下面时，我极力尝试使子菜单出现在下面的菜单项下。 I created color-change and underline when menu-item is hovered using css but have no idea how to make sub-menu appears under the menu-item. 当使用css悬停菜单项时，我创建了颜色更改和下划线，但不知道如何使子菜单出现在菜单项下。 I have no knowledge related jquery so I googled some jquery effect but did not work either. 我没有与jquery相关的知识，所以我用google搜索了jquery的效果，但是也没有用。 Is there other way to make it appears without using jquery? 还有其他方法可以使它不使用jquery出现吗？
<style> .menu { margin-left: 220px; } .menu-item-text { display: inline-block; margin-top: 18px; color: black; font-weight: 550; } .menu-item-text:hover { content: ''; color: red; } .menu-item-text:hover:after { content:''; display: block; border-bottom: 2px solid rgb(15, 1, 1); margin-top: 19px; } .sub-menu1 { background: yellowgreen; position: absolute; display: block; } .sub-menu li { white-space: nowrap; display: inline; } .sub-menu a:before { content: '☆'; top: 2px; } .sub-menu a:hover:before, .sub-menu a:focus:before { content: '★'; } .navigation .sub-menu { display: none; } .menu-act .menu-item-text { color: red; } .sub-menu1 li, .sub-menu1 a { display: inline-block; } </style>
<body> <nav class="navigation"> <ul class="menu"> <li class='menu-item' tabindex='0'> <span class="menu-item-text menu-act">About HTML</span> <ul class='sub-menu'> <li> <a href="#">HTML Introduction</a> </li> <li> <a href="#">Reference Introduction</a> </li> <li> <a href="#">Examples</a> </li> </ul> </li> </ul> </nav> </body>
2 个解决方案
解决方案1
1 已采纳 2018-09-12 06:04:20
You don't need JQuery to display a submenu on hover. 您不需要JQuery在悬停时显示子菜单。 You can do it with CSS. 您可以使用CSS来实现。
.menu-item:hover .sub-menu {display: block;}
If there is more than one submenu then use id or different class names for them. 如果有多个子菜单，请为它们使用id或不同的类名。 So you can display the corresponding submenu under each menu. 因此，您可以在每个菜单下显示相应的子菜单。
<style> .menu { margin-left: 220px; } .menu-item-text { display: inline-block; margin-top: 18px; color: black; font-weight: 550; } .menu-item-text:hover { content: ''; color: red; } .menu-item-text:hover:after { content:''; display: block; border-bottom: 2px solid rgb(15, 1, 1); margin-top: 19px; } .sub-menu1 { background: yellowgreen; position: absolute; display: block; } .sub-menu li { white-space: nowrap; display: inline; } .sub-menu a:before { content: '☆'; top: 2px; } .sub-menu a:hover:before, .sub-menu a:focus:before { content: '★'; } .menu-item:hover .sub-menu {display: block;} .navigation .sub-menu { display: none; } .menu-act .menu-item-text { color: red; } .sub-menu1 li, .sub-menu1 a { display: inline-block; } </style>
<body> <nav class="navigation"> <ul class="menu"> <li class='menu-item' tabindex='0'> <span class="menu-item-text menu-act">About HTML</span> <ul class='sub-menu'> <li> <a href="#">HTML Introduction</a> </li> <li> <a href="#">Reference Introduction</a> </li> <li> <a href="#">Examples</a> </li> </ul> </li> </ul> </nav> </body>
With JQuery you can simulate this as follows: 使用JQuery，您可以如下模拟：
$(".menu-item").on("mouseover", function(){ //This will display the submenu on mouse hover. $(".sub-menu").show(); }); $(".menu-item").on("mouseout", function(){ //This will hide the submenu when mouse leaves the menu item. $(".sub-menu").hide(); });
.menu { margin-left: 220px; } .menu-item-text { display: inline-block; margin-top: 18px; color: black; font-weight: 550; } .menu-item-text:hover { content: ''; color: red; } .menu-item-text:hover:after { content:''; display: block; border-bottom: 2px solid rgb(15, 1, 1); margin-top: 19px; } .sub-menu1 { background: yellowgreen; position: absolute; display: block; } .sub-menu li { white-space: nowrap; display: inline; } .sub-menu a:before { content: '☆'; top: 2px; } .sub-menu a:hover:before, .sub-menu a:focus:before { content: '★'; } .navigation .sub-menu { display: none; } .menu-act .menu-item-text { color: red; } .sub-menu1 li, .sub-menu1 a { display: inline-block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <nav class="navigation"> <ul class="menu"> <li class='menu-item' tabindex='0'> <span class="menu-item-text menu-act">About HTML</span> <ul class='sub-menu'> <li> <a href="#">HTML Introduction</a> </li> <li> <a href="#">Reference Introduction</a> </li> <li> <a href="#">Examples</a> </li> </ul> </li> </ul> </nav> </body>
You can use mouseover and mouseout or mouseleave events of jQuery. 您可以使用jQuery的mouseover和mouseout或mouseleave事件。
解决方案2
0 2018-09-12 06:05:50
You can also do this with CSS but you mention you want in jquery that's why I make it with Jquery . 您也可以使用CSS来做到这一点，但是您提到要在jquery中使用它，这就是为什么我使用Jquery做到这一点。
I think you want like this:- 我想你想要这样：-
$(document).ready(function(){ $('.menu-item-text').mouseover(function(){ $(this).next('.sub-menu').show(); }); $('.menu-item-text').mouseout(function(){ $(this).next('.sub-menu').hide(); }); });
.menu { margin-left: 220px; } .menu-item-text { display: inline-block; margin-top: 18px; color: black; font-weight: 550; } .menu-item-text:hover { content: ''; color: red; } .menu-item-text:hover:after { content:''; display: block; border-bottom: 2px solid rgb(15, 1, 1); margin-top: 19px; } .sub-menu1 { background: yellowgreen; position: absolute; display: block; } .sub-menu li { white-space: nowrap; display: inline; } .sub-menu a:before { content: '☆'; top: 2px; } .sub-menu a:hover:before, .sub-menu a:focus:before { content: '★'; } .navigation .sub-menu { display: none; } .menu-act .menu-item-text { color: red; } .sub-menu1 li, .sub-menu1 a { display: inline-block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="navigation"> <ul class="menu"> <li class='menu-item' tabindex='0'> <span class="menu-item-text menu-act">About HTML</span> <ul class='sub-menu'> <li> <a href="#">HTML Introduction</a> </li> <li> <a href="#">Reference Introduction</a> </li> <li> <a href="#">Examples</a> </li> </ul> </li> </ul> </nav>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在jQuery悬停菜单中保持子菜单打开-请检查示例 - How can I keep my sub-menu open in jQuery hover menu - please check sample
如何在点击时使用jQuery添加标题子菜单？ - How to add a header sub-menu using jQuery on click?
使用JQuery显示子菜单 - Show a sub-menu using JQuery
如何将子菜单置于左侧 - How can I position the sub-menu to the left side
使用jQuery打开子菜单 - Open a sub-menu using jQuery
如何使用 CSS、HTML 和 javascript 使这个折叠和展开菜单从父菜单到子菜单？ - How do I make this collapse and expand menu from parent menu to sub-menu using CSS, HTML and javascript?
如何使用事件监听器或设置事件隐藏和显示子菜单 - How can i hide and display the sub-menu's on click using event listener or set event
展开jQuery->导航子菜单->子菜单 - Expand jQuery -> Navigation sub-menu -> sub-menu
当我将光标移到侧边栏时，子菜单如何从侧边栏向下滑动 - how can the sub-menu slide down from the sidebar when i just take my cursor to it
子菜单问题 - Problems with the sub-menu
相关标签