您好我目前正面临一个问题，我希望我的子菜单显示在我选中它或将鼠标悬停在焦点上时。我想删除箭头使其无法点击以显示两个菜单上的子菜单，但是您可以选项卡或将鼠标悬停在其上以显示子菜单。 另外，如何正确对齐所有内容，它不会与标题重叠。
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
$(function() {
var currentItem = "";
$( 'nav li').on('click', function(e){
console.log('handling menu click event: ', $(this).attr('id'), ": ", (currentItem ? currentItem.attr('id'): "") );
$(this).closest('nav').find('li, span').removeClass('active');
if ( $(this).hasClass( 'menu-item-has-children' ) ) {
$(this).find('> span').addClass('active');
} else {
$(this).addClass('active');
}
console.log('done setting active');
if ( $(this).hasClass('menu-item-has-ancestor') ) {
console.log('setting parent active ', $(this).parent().closest('span.menu-item-text'));
$(this).parent().closest('li').find('span.menu-item-text').addClass('active');
e.stopPropagation();
} else if ($(this).hasClass( 'menu-item-has-children' ) ) {
console.log('setting toggle for children');
var degrees = 90;
var submenu = $(this).children('ul');
var arrow = $(this).find('button.menu-item-expand');
if ( submenu.hasClass( 'menu-list-toggle-closed' ) ) {
console.log('removing closed');
submenu.removeClass( 'menu-list-toggle-closed' );
degrees = 270;
} else {
console.log('adding closed');
submenu.addClass( 'menu-list-toggle-closed' );
}
console.log('arrow: ', arrow);
if ( arrow ) {
arrow.css('transform', ( 'rotate(' + degrees + 'deg)' ) );
}
} else {
console.log('should not have to deal with this as a page would have loaded');
$('nav li > ul').each(function(idx) {
if ( ! ( $(this).hasClass( 'menu-list-toggle-closed' ) ) ) {
$(this).addClass( 'menu-list-toggle-closed' );
var arrow = $(this).parent().find('button.menu-item-expand');
if ( arrow ) {
arrow.css('transform', ( 'rotate(90deg)' ) );
}
}
});
}
currentItem = $(this);
});
});/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : May 24, 2018, 12:07:14 PM
Author : djrice
*/
.main-navigation {
display: block;
clear: left;
}
.main-navigation a,
.main-navigation a:visited,
.main-navigation span.menu-item-text {
display: inline-block;
/*width: 100%;*/
padding: .5em 1em .5em 0;
text-decoration: none;
color: #3e3d3c;
}
.main-navigation a:hover,
.main-navigation a:focus {
text-decoration: underline;
}
.main-navigation ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.main-navigation > ul {
padding-top: 1em;
}
.main-navigation li {
position: relative;
}
.main-navigation .active {
background-color: #c5ddfc;
}
.main-navigation ul li {
padding-left: 1em;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li:focus > ul {
left: auto;
}
.main-navigation ul ul {
position: absolute;
display: block; /* flex */
top: 2.5em;
background-color: #e8eaeb;
/*background-color: #c5ddfc;*/
z-index: 9999;
}
.main-navigation ul ul ul {
top: 0;
}
.main-navigation .menu-item-has-children {
/*background-color: #e8eaeb;*/
}
.main-navigation .menu-item-has-children > a {
padding-right: 0em;
}
.main-navigation .menu-list-toggle-closed {
display:none;
}
.main-navigation button.menu-item-expand {
display: inline-block;
padding: .25em;
margin-left: .5em;
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(90deg);
}<?php
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
?>
<nav id="primary-nav" class="main-navigation">
<ul id="menu-item-1" class="menu-top">
<li id="menu-item-2" class="menu-item">
<a href="/page-about_the_collection.php">
<span>About the<br />Collection</span>
</a>
</li>
<li id="menu-item-3" class="menu-item">
<a href="/xtf/search?brand=plastics&collection=plastics&objectType=Artifact">
Objects
</a>
</li>
<li id="menu-item-4" class="menu-item">
<a href="/xtf/search?brand=plastics&collection=plastics&objectType=findingaid&sort=title">
Manuscripts
</a>
</li>
<li id="menu-item-5" class="menu-item">
<a href="/xtf/search?brand=plastics&collection=plastics&objectType=catalog&sort=title">
Books & Journals
</a>
</li>
<li id="menu-item-6" class="menu-item">
<li class="nav6 LOGO"><h1 class="body_header-logo"><a href="/" class="header-logo noborder">
The Plastics Collection
</a>
</li>
<li id="menu-item-7" class="menu-item menu-item-has-children">
<span class="menu-item-text">
<a href="/page-the_history.php"> History & People </a>
<button class="menu-item-expand">></button>
</span>
<ul id="menu-item-7" class="menu-list menu-list-toggle-closed">
<li id="menu-item-8" class="menu-item menu-item-has-ancestor">
<a href="/page-the_history.php">
The History
</a>
</li>
<li id="menu-item-9" class="menu-item menu-item-has-ancestor">
<a href="/page-essays.php">
Essays
</a>
</li>
<li id="menu-item-10" class="menu-item menu-item-has-ancestor">
<a href="/page-timeline.php">
Timeline
</a>
</li>
<li id="menu-item-11" class="menu-item menu-item-has-ancestor">
<a href="/xtf/search?brand=plastics&collection=plastics&entityType=person&sort=title&letterFilter=AA">
People
</a>
</li>
<li id="menu-item-12" class="menu-item menu-item-has-ancestor">
<a href="/xtf/search?brand=plastics&collection=plastics&entityType=corporateBody&sort=title&letterFilter=AA">
Companies
</a>
</li>
</ul>
</li>
<li id="menu-item-13" class="menu-item menu-item-has-children">
<span class="menu-item-text">
<a href="page-materials.php"> Materials </a>
<button class="menu-item-expand">></button>
</span>
<ul id="menu-item-13" class="menu-list menu-list-toggle-closed">
<li id="menu-item-14" class="menu-item menu-item-has-ancestor">
<a href="/page-materials.php">
Materials
</a>
</li>
<li id="menu-item-15" class="menu-item menu-item-has-ancestor">
<a href="/page-processes.php">
Processes
</a>
</li>
</ul>
</li>
<li id="menu-item-16" class="menu-item">
<a href="/page-resources.php">
Other Resources
</a>
</li>
</ul>
</nav>