如何将类添加到具有子项的菜单项
[英]How to add a class to a menu item that has children
问题描述
I just created menu and some of the items have sub items as you can see on my html structure: 
我刚刚创建了菜单，其中一些项包含子项，如您在html结构上所见：
<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="menu-menu-1-container">
<ul id="primary-menu" class="menu">
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-41">
<a href="http://powersol.burnnotice.co.za/">Home</a>
</li>
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-42">
<a href="http://powersol.burnnotice.co.za/our-dealers/">Our Dealers</a>
<ul class="sub-menu">
<li id="menu-item-250" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-250">
<a href="http://powersol.burnnotice.co.za/dealer-1/">Dealer 1</a>
</li>
<li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246">
<a href="http://powersol.burnnotice.co.za/dealer-2/">Dealer 2</a>
</li>
<li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245">
<a href="http://powersol.burnnotice.co.za/dealer-3/">Dealer 3</a>
</li>
<li id="menu-item-249" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-249">
<a href="http://powersol.burnnotice.co.za/dealer-4/">Dealer 4</a>
</li>
</ul>
</li>
<li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39">
<a href="http://powersol.burnnotice.co.za/companies/">Companies</a>
<ul class="sub-menu">
<li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247">
<a href="http://powersol.burnnotice.co.za/companies-1/">Companies 1</a>
</li>
<li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-253">
<a href="http://powersol.burnnotice.co.za/companies-3/">Companies 3</a>
</li>
<li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-248">
<a href="http://powersol.burnnotice.co.za/companies-4/">Companies 4</a>
</li>
</ul>
</li>
<li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40">
<a href="http://powersol.burnnotice.co.za/contact/">Contact</a>
</li>
</ul>
</div>
</nav>
For the css, I first put a display none cause initially the sub-menus cannot be visible. 对于CSS，我首先没有显示任何内容，因为最初子菜单不可见。
.main-navigation ul li{
display: none;
}
Now, How can I add a class dropdown-menu to a menu item that has sub-items everytime I hover over that particular item? 现在，每次将鼠标悬停在具有特定子项目的菜单项上时，如何将其添加到该菜单项中？
Here my js but it does nothing when I hover over the item: 这是我的js，但是当我将鼠标悬停在该项目上时它什么也没做
$('.main-navigation ul > li.menu-item-has-children').on("hover" function(){
$('.main-navigation ul > li.menu-item-has-children').removeClass('dropdown-menu');
if($(this).hasClass('dropdown-menu')){
$(this).addClass('dropdown-menu');
}else{
$(this).addClass('dropdown-menu');
}
});
2 个解决方案
解决方案1
2 已采纳 2016-12-07 08:57:18
try this demo ,only use css, check the dropdown, this only for your information 试试这个演示，只使用css，检查下拉菜单，这仅供参考
#primary-menu > li { display:inline-block; position:relative; margin:15px; } #primary-menu > li ul { position:absolute; left:0; padding:0; display:none; } #primary-menu > li ul li { white-space:nowrap; } #primary-menu > li:hover ul { display:block; }
<nav id="site-navigation" class="main-navigation" role="navigation"> <div class="menu-menu-1-container"> <ul id="primary-menu" class="menu"> <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-41"> <a href="http://powersol.burnnotice.co.za/">Home</a> </li> <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-42"> <a href="http://powersol.burnnotice.co.za/our-dealers/">Our Dealers</a> <ul class="sub-menu"> <li id="menu-item-250" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-250"> <a href="http://powersol.burnnotice.co.za/dealer-1/">Dealer 1</a> </li> <li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246"> <a href="http://powersol.burnnotice.co.za/dealer-2/">Dealer 2</a> </li> <li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245"> <a href="http://powersol.burnnotice.co.za/dealer-3/">Dealer 3</a> </li> <li id="menu-item-249" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-249"> <a href="http://powersol.burnnotice.co.za/dealer-4/">Dealer 4</a> </li> </ul> </li> <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39"> <a href="http://powersol.burnnotice.co.za/companies/">Companies</a> <ul class="sub-menu"> <li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247"> <a href="http://powersol.burnnotice.co.za/companies-1/">Companies 1</a> </li> <li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-253"> <a href="http://powersol.burnnotice.co.za/companies-3/">Companies 3</a> </li> <li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-248"> <a href="http://powersol.burnnotice.co.za/companies-4/">Companies 4</a> </li> </ul> </li> <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"> <a href="http://powersol.burnnotice.co.za/contact/">Contact</a> </li> </ul> </div> </nav>
解决方案2
0 2016-12-07 09:03:39
You can do it CSS :hover itself. 您可以做到CSS :hover本身。 but as you wanted in jquery here is the solution 但是，正如您在jquery想要的，这是解决方案
Use $('.main-navigation ul > li.menu-item-has-children').on("mouseenter mouseleave", function(e){ . mouseenter mouseleave in place of hover 使用$('.main-navigation ul > li.menu-item-has-children').on("mouseenter mouseleave", function(e){ 。 mouseenter mouseleave代替hover
$('.main-navigation ul > li.menu-item-has-children').on("mouseenter mouseleave", function(e){ $('.main-navigation ul > li.menu-item-has-children').removeClass('dropdown-menu'); if(e.type=='mouseenter') $(this).addClass('dropdown-menu'); });
.main-navigation ul ul{ display: none; } .main-navigation ul li.dropdown-menu ul{ display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav id="site-navigation" class="main-navigation" role="navigation"> <div class="menu-menu-1-container"> <ul id="primary-menu" class="menu"> <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-41"> <a href="http://powersol.burnnotice.co.za/">Home</a> </li> <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-42"> <a href="http://powersol.burnnotice.co.za/our-dealers/">Our Dealers</a> <ul class="sub-menu"> <li id="menu-item-250" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-250"> <a href="http://powersol.burnnotice.co.za/dealer-1/">Dealer 1</a> </li> <li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246"> <a href="http://powersol.burnnotice.co.za/dealer-2/">Dealer 2</a> </li> <li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245"> <a href="http://powersol.burnnotice.co.za/dealer-3/">Dealer 3</a> </li> <li id="menu-item-249" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-249"> <a href="http://powersol.burnnotice.co.za/dealer-4/">Dealer 4</a> </li> </ul> </li> <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39"> <a href="http://powersol.burnnotice.co.za/companies/">Companies</a> <ul class="sub-menu"> <li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247"> <a href="http://powersol.burnnotice.co.za/companies-1/">Companies 1</a> </li> <li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-253"> <a href="http://powersol.burnnotice.co.za/companies-3/">Companies 3</a> </li> <li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-248"> <a href="http://powersol.burnnotice.co.za/companies-4/">Companies 4</a> </li> </ul> </li> <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"> <a href="http://powersol.burnnotice.co.za/contact/">Contact</a> </li> </ul> </div> </nav>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何将类添加到相应的菜单项 - how to add class to corresponding menu item
如果URL具有aa / directory / listing，则将活动类添加到菜单“parent”项 - Add active class to menu “parent” item if URL has a a /directory/ listing
如果菜单项具有特定的URL，则在菜单项上添加类（当前） - add class (current) on menu item if It has particular url
当子代具有不同的标签时，如何向元素的所有子代添加类 - how to add class to all children of the elements when children has different tags
如何根据URL的开头将类添加到菜单项？ - How to add the class to menu item based on how the URL starts?
如果有两个孩子，则将其添加到容器中 - Add class to container if it has two children
响应式导航-如果有孩子则添加课程 - Responsive Nav - Add a class if has children
如何在WordPress的当前菜单项中添加“活动”类 - How to add “active” class to current menu item in WordPress
如何将活动班级添加到此菜单项？ - How do I add active class to this menu item?
如何将类添加到菜单项上当前单击的元素 - How to add class to the currently clicked elemnt on the menu item
相关标签