0
私はnavを作成しています。 問題は、「+」記号をクリックするとサブメニューが表示されることです。それを変更しようとすると、親メニュー項目、つまりサービス項目上にホバーされたときにサブメニューが表示されます。Nav：ホバーしたときにサブメニューが表示されるはずですか？ - 動作していない
試み：私はjQueryを使って（
/* ON HOVER - ADDED */
container.find('.dropdown-toggle').hover(function(e) { ... code below
）を.hover使用して試してみたと「+」の上に浮かんだ瞬間に、それは本当に速い表示され、再び示し、その後消えます。
/* global ethemeScreenReaderText */
/**
* Theme functions file.
*
* Contains handlers for navigation and widget area.
*/
(function($) {
var masthead, menuToggle, siteNavigation;
function initMainNavigation(container) {
// Add dropdown toggle that displays child menu items.
var dropdownToggle = $('<button />', {
'class': 'dropdown-toggle',
'aria-expanded': false
})
.append($('<span />', {
'class': 'dropdown-symbol',
text: '+'
}))
.append($('<span />', {
'class': 'screen-reader-text',
text: ethemeScreenReaderText.expand
}));
container.find('.menu-item-has-children > a, .page_item_has_children > a').after(dropdownToggle);
container.find('.dropdown-toggle').click(function(e) {
var _this = $(this),
screenReaderSpan = _this.find('.screen-reader-text');
dropdownSymbol = _this.find('.dropdown-symbol');
dropdownSymbol.text(dropdownSymbol.text() === '-' ? '+' : '-');
e.preventDefault();
_this.toggleClass('toggled-on');
_this.next('.children, .sub-menu').toggleClass('toggled-on');
_this.attr('aria-expanded', _this.attr('aria-expanded') === 'false' ? 'true' : 'false');
screenReaderSpan.text(screenReaderSpan.text() === ethemeScreenReaderText.expand ? ethemeScreenReaderText.collapse : ethemeScreenReaderText.expand);
});
/* ON HOVER - ADDED */
container.find('.dropdown-toggle').hover(function(e) {
var _this = $(this),
screenReaderSpan = _this.find('.screen-reader-text');
dropdownSymbol = _this.find('.dropdown-symbol');
dropdownSymbol.text(dropdownSymbol.text() === '-' ? '+' : '-');
e.preventDefault();
_this.toggleClass('toggled-on');
_this.next('.children, .sub-menu').toggleClass('toggled-on');
_this.attr('aria-expanded', _this.attr('aria-expanded') === 'false' ? 'true' : 'false');
screenReaderSpan.text(screenReaderSpan.text() === ethemeScreenReaderText.expand ? ethemeScreenReaderText.collapse : ethemeScreenReaderText.expand);
});
}
initMainNavigation($('.main-navigation'));
masthead = $('#masthead');
menuToggle = masthead.find('.menu-toggle');
siteNavigation = masthead.find('.main-navigation > div > ul');
// Enable menuToggle.
(function() {
// Return early if menuToggle is missing.
if (!menuToggle.length) {
return;
}
// Add an initial values for the attribute.
menuToggle.add(siteNavigation).attr('aria-expanded', 'false');
menuToggle.on('click.etheme', function() {
$(siteNavigation.closest('.main-navigation'), this).toggleClass('toggled-on');
$(this)
.add(siteNavigation)
.attr('aria-expanded', $(this).add(siteNavigation).attr('aria-expanded') === 'false' ? 'true' : 'false');
});
})();
// Fix sub-menus for touch devices and better focus for hidden submenu items for accessibility.
(function() {
if (!siteNavigation.length || !siteNavigation.children().length) {
return;
}
// Toggle `focus` class to allow submenu access on tablets.
function toggleFocusClassTouchScreen() {
if ('none' === $('.menu-toggle').css('display')) {
$(document.body).on('touchstart.etheme', function(e) {
if (!$(e.target).closest('.main-navigation li').length) {
$('.main-navigation li').removeClass('focus');
}
});
siteNavigation.find('.menu-item-has-children > a, .page_item_has_children > a')
.on('touchstart.etheme', function(e) {
var el = $(this).parent('li');
if (!el.hasClass('focus')) {
e.preventDefault();
el.toggleClass('focus');
el.siblings('.focus').removeClass('focus');
}
});
} else {
siteNavigation.find('.menu-item-has-children > a, .page_item_has_children > a').unbind('touchstart.etheme');
}
}
if ('ontouchstart' in window) {
$(window).on('resize.etheme', toggleFocusClassTouchScreen);
toggleFocusClassTouchScreen();
}
siteNavigation.find('a').on('focus.etheme blur.etheme', function() {
$(this).parents('.menu-item, .page_item').toggleClass('focus');
});
})();
// Add the default ARIA attributes for the menu toggle and the navigations.
function onResizeARIA() {
if ('block' === $('.menu-toggle').css('display')) {
if (menuToggle.hasClass('toggled-on')) {
menuToggle.attr('aria-expanded', 'true');
} else {
menuToggle.attr('aria-expanded', 'false');
}
if (siteNavigation.closest('.main-navigation').hasClass('toggled-on')) {
siteNavigation.attr('aria-expanded', 'true');
} else {
siteNavigation.attr('aria-expanded', 'false');
}
} else {
menuToggle.removeAttr('aria-expanded');
siteNavigation.removeAttr('aria-expanded');
menuToggle.removeAttr('aria-controls');
}
}
$(document).ready(function() {
$(window).on('load.etheme', onResizeARIA);
$(window).on('resize.etheme', onResizeARIA);
});
})(jQuery);/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
/*c */
.main-navigation {
display: block;
clear: left;
}
.main-navigation ul {
display: none;
list-style: none;
margin: 0;
padding-top: 1em;
padding-left: 0;
}
.main-navigation ul ul {
display: none;
top: 1.5em;
z-index: 99999;
}
.main-navigation ul ul ul {
top: 0;
}
.main-navigation ul ul li {
padding-left: 1em;
}
.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li.focus>ul {
left: 100%;
}
.main-navigation ul ul a {
width: 200px;
}
.main-navigation ul li:hover>ul,
.main-navigation ul li.focus>ul {
left: auto;
}
.main-navigation li {
position: relative;
}
.main-navigation a {
display: inline-block;
width: 100%;
padding: .5em 1em .5em 0;
text-decoration: none;
color: #fff;
font-size: 1.1rem;
font-weight: bolder;
}
.main-navigation a:hover,
.main-navigation a:focus {
text-decoration: underline;
}
.main-navigation .menu-item-has-children,
.main-navigation .page_item_has_children {
min-width: 218px;
}
.main-navigation .menu-item-has-children>a,
.main-navigation .page_item_has_children>a {
padding-right: 2em;
}
button.dropdown-toggle {
position: absolute;
right: 0;
border: none;
background: inherit;
color: white;
line-height: 1.5em;
padding: .4em 1em .4em .5em;
}
/* Burger Nav */
#sidebar-btn {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 15px;
cursor: pointer;
margin: 20px;
position: relative;
top: 0px;
}
#sidebar-btn span {
height: 2px;
background: black;
margin-bottom: 5px;
display: block;
}
#sidebar-btn span:nth-child(2) {
width: 75%;
}
#sidebar-btn span:nth-child(3) {
width: 50%;
}
.menu-toggle {
position: absolute;
top: 0;
right: 0;
display: block;
margin: 1.8rem;
/* \t padding: .6em .8em;
*/
font-size: 80%;
text-transform: uppercase;
/* \t color: white;
*/
/* \t border: 1px solid rgba(255, 255, 255, 0.3);
*/
}
/* Toggle small menu and children on */
.toggled-on ul,
.sub-menu.toggled-on {
display: block;
}
@media screen and (min-width: 601px) {
.menu-toggle {
display: none;
}
.main-navigation .menu-item-has-children>a,
.main-navigation .page_item_has_children>a {
padding-right: 2em;
background: rgba(255, 255, 255, 0.1);
}
.main-navigation ul {
display: block;
display: flex;
flex-wrap: wrap;
}
.main-navigation ul ul {
flex-direction: column;
background: rgba(255, 255, 255, 0.1);
margin-left: 0;
}
.main-navigation ul ul li {
padding-left: 0;
}
.main-navigation ul ul li a {
width: 218px;
background: none;
}
.main-navigation ul li a {
padding: .4em 1em;
}
}
@media screen and (min-width: 900px) {
.main-navigation ul {
justify-content: flex-end;
padding-top: 0;
}
/* If you want dropdowns to open on hover, uncomment this: */
.main-navigation ul i:hover>ul,
.main-navigation ul li:focus>ul {
display: block;
}
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
margin: 0 0 1.5em;
overflow: hidden;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
float: left;
width: 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
float: right;
text-align: right;
width: 50%;
}<header id="masthead" class="site-header">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<div class="header-wrapper">
<div class="site-branding">
<div class="site-branding-text">
<p class="site-title"><a href="http://localhost/wordpress/" rel="home">Olsen Electrical</a></p>
<p class="site-description">Its an awesome website</p>
</div>
</div>
<!-- .site-branding -->
<nav id="site-navigation" class="main-navigation">
<button class="menu-toggle">Primary Menu</button>
<div class="menu-primary-menu-links-container">
<ul id="primary-menu" class="menu">
<li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-167"><a href="http://localhost/wordpress/home/">Home</a></li>
<li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165"><a href="http://localhost/wordpress/about/">About</a></li>
<li id="menu-item-2015" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2009 current_page_item menu-item-has-children menu-item-2015 focus"><a href="http://localhost/wordpress/services/">Services</a><button class="dropdown-toggle" aria-expanded="false"><span class="dropdown-symbol">+</span><span class="screen-reader-text">Expand child menu</span></button>
<ul class="sub-menu">
<li id="menu-item-2033" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2033"><a href="http://localhost/wordpress/gallery/">Gallery</a></li>
<li id="menu-item-2032" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2032"><a href="http://localhost/wordpress/news-updates/">News Updates</a></li>
</ul>
</li>
<li id="menu-item-1987" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1987"><a href="http://localhost/wordpress/gallery/">Projects</a></li>
<li id="menu-item-2016" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2016"><a title="1800 495 290" href="http://www.google.com">1800 495 290</a></li>
</ul>
</div>
</nav>
<!-- #site-navigation -->
</div>
</header>