javascript - CSS/JS扩展三级下拉导航，第三个子菜单项不可点击，只关闭父LI
问题描述
我确实记得一段时间后修复了这个问题，但不知何故恢复了，但从内存和控制台中的调试来看，我认为是父 LI 正在包装，使整个区域可点击（设置 console.log 并返回第二级的日志，所以认为这是问题，但可能是错误的）我认为 css 是问题。
要在示例中查看/复制，请单击 SHOP，然后 WASH 这是我遇到问题的子项目...单击一个并关闭。
JSFiddle：https ://jsfiddle.net/hostandname/bz9cfp8u/26/ （精简为CSS/JS，但同样可以重现问题）
HTML
<body class="website-wrapper af-ajax-shop-on template-index af-top-bar-on header-full-width enable-sticky-header sticky-header-real no-sticky-footer wrapper-full-width global-search-full-screen af-ajax-search-on gl-tab-js global-header-split global-cart-design-3 catalog-mode-off sticky-header-prepared document-ready is-mobile af-wrapper-shifted af-mobile-opened">
<header class="container-fluid main-header header-split menu-calculated color-scheme-light">
<div class="main-nav site-navigation af-navigation menu-center d-md-none d-lg-block nav-mobile">
<ul class="menu parent-1">
<li class="list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-1"><a href="/en/" title="Home" data-status="1" data-menu-id="10" data-parent-id="0">Home</a></li>
<li class="list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-1 has-sub-menu"><a href="/en/shop-the-lot" title="Shop" data-status="1" data-menu-id="11" data-parent-id="0">Shop</a>
<ul class="sub-menu level-11 parent-2">
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-2 has-sub-menu"><a href="DEBUG/en/wash" title="Wash" data-status="0" data-menu-id="2" data-parent-id="11">Wash</a>
<ul class="sub-menu level-2 parent-3">
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/wash/pre-wash" title="Pre Wash" data-status="0" data-menu-id="95" data-parent-id="2">Pre Wash</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/wash/snow-foams" title="Snow Foam" data-status="0" data-menu-id="94" data-parent-id="2">Snow Foam</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/wash/decontamination" title="Decontamination" data-status="0" data-menu-id="98" data-parent-id="2">Decontamination</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/wash/cleaners" title="Cleaners" data-status="0" data-menu-id="145" data-parent-id="2">Cleaners</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/wash/shampoos" title="Shampoos" data-status="0" data-menu-id="96" data-parent-id="2">Shampoos</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/wash/wash-mitts" title="Wash Mitts" data-status="0" data-menu-id="99" data-parent-id="2">Wash Mitts</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/wash/wheels" title="Wheels" data-status="0" data-menu-id="103" data-parent-id="2">Wheels</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/wash/engine-bay" title="Engine Bay" data-status="0" data-menu-id="144" data-parent-id="2">Engine Bay</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/wash/rinse-aids" title="Rinse Aids" data-status="0" data-menu-id="100" data-parent-id="2">Rinse Aids</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/wash/drying-towels" title="Drying Towels" data-status="0" data-menu-id="102" data-parent-id="2">Drying Towels</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/wash/brushes" title="Brushes" data-status="0" data-menu-id="142" data-parent-id="2">Brushes</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/wash/wash-kits" title="Wash Kits" data-status="0" data-menu-id="132" data-parent-id="2">Wash Kits</a></li>
<li class="flex-column col view-all-link list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/wash" title="View all Wash" data-status="0" data-menu-id="151" data-parent-id="2">View all Wash</a></li>
</ul>
</li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-2 has-sub-menu"><a href="DEBUG/en/polish" title="Polish" data-status="0" data-menu-id="3" data-parent-id="11">Polish</a>
<ul class="sub-menu level-3 parent-3">
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/polish/hand-polishes" title="Hand Polishes" data-status="0" data-menu-id="119" data-parent-id="3">Hand Polishes</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/polish/glazes" title="Glazes" data-status="0" data-menu-id="106" data-parent-id="3">Glazes</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/polish/machine-polishers" title="Machine Polishers" data-status="0" data-menu-id="108" data-parent-id="3">Machine Polishers</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/polish/paint-correction" title="Paint Correction" data-status="0" data-menu-id="109" data-parent-id="3">Paint Correction</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/polish/metal-polish" title="Metal Polish" data-status="0" data-menu-id="107" data-parent-id="3">Metal Polish</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/polish/pads" title="Pads" data-status="0" data-menu-id="110" data-parent-id="3">Pads</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/polish/applicators" title="Applicators" data-status="0" data-menu-id="111" data-parent-id="3">Applicators</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/polish/polish-kits" title="Polish Kits" data-status="0" data-menu-id="133" data-parent-id="3">Polish Kits</a></li>
<li class="flex-column col view-all-link list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/polish" title="View all Polish" data-status="0" data-menu-id="152" data-parent-id="3">View all Polish</a></li>
</ul>
</li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-2 has-sub-menu"><a href="DEBUG/en/protect" title="Protect" data-status="0" data-menu-id="147" data-parent-id="11">Protect</a>
<ul class="sub-menu level-147 parent-3">
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/protect/ceramic-coatings" title="Ceramic Coatings" data-status="0" data-menu-id="117" data-parent-id="147">Ceramic Coatings</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/protect/hand-waxes" title="Hand Waxes" data-status="0" data-menu-id="121" data-parent-id="147">Hand Waxes</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/finishing/spray-wax-detailers" title="Spray Waxes" data-status="0" data-menu-id="122" data-parent-id="147">Spray Waxes</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/protect/wheel-waxes" title="Wheel Waxes" data-status="0" data-menu-id="124" data-parent-id="147">Wheel Waxes</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/protect/cloths-applicators" title="Cloths & Applicators" data-status="0" data-menu-id="125" data-parent-id="147">Cloths & Applicators</a></li>
<li class="flex-column col list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/protect/protect-kits" title="Wax Kits" data-status="0" data-menu-id="123" data-parent-id="147">Wax Kits</a></li>
<li class="flex-column col view-all-link list-inline-item block_type_no_children menu-item menu-item-design-default item-event-hover child-3"><a href="DEBUG/en/protect" title="View all Protect" data-status="0" data-menu-id="156" data-parent-id="147">View all Protect</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</header>
</body>
JS
var JSModule;
var isMobile, isTablet, isDesktop;
(function($) {
"use strict";
JSModule = (function() {
return {
init: function() {
this.checkDevice();
this.menuSetUp();
$('body').addClass('document-ready');
var resizeTimer, isMobile, isTablet, isDesktop;
},
/***---------------------
* Mobile / Viewport Checking
*------------------------
*/
checkDevice: function() {
var checkSize = function() {
var body = $('body'),
viewportWidth = $(window).width(),
device,
classes = "is-mobile is-tablet is-desktop";
if (viewportWidth < 768) {
// mobile
body.removeClass(classes).addClass("is-mobile");
isMobile = true;
isTablet = false;
isDesktop = false;
device = 'mobile';
} else if (viewportWidth >= 768 && viewportWidth < 992) {
// tablet
body.removeClass(classes).addClass("is-tablet");
isMobile = false;
isTablet = true;
isDesktop = false;
device = 'tablet';
} else if (viewportWidth >= 992 && viewportWidth < 1200) {
// laptops
body.removeClass(classes).addClass("is-desktop");
isMobile = false;
isTablet = false;
isDesktop = true;
device = 'desktop';
} else {
// desktops
body.removeClass(classes).addClass("is-desktop");
isMobile = false;
isTablet = false;
isDesktop = true;
device = 'desktop';
}
}
checkSize();
$(window).on('resize', checkSize);
},
/***----------------------------------
* Menu Preparation
*------------------------------------
*/
menuSetUp: function() {
var addLevelClass = function($parent, level) {
// add a parent class to the ul
$parent.addClass('parent-' + level);
// fetch all the li's that are direct children of the ul
var $children = $parent.children('li');
// add a child class to the li
$children.addClass('child-' + level);
// loop trough each li
$children.each(function() {
// get the ul that is a direct child of the li
var $sublist = $(this).children('ul');
// if an ul was found
if ($sublist.length > 0) {
// add a class to the current li indicating there is a sub list
if (!$(this).hasClass('is-section')) {
$(this).addClass('has-sub-menu');
}
addLevelClass($sublist, level + 1);
}
});
}
addLevelClass($('.af-navigation .menu'), 1);
var mainMenu = $('.af-navigation .menu');
if (isMobile || isTablet) {
mainMenu.on('click touchstart', 'li.has-sub-menu.child-1', function(e) {
console.log("1st clicked");
e.preventDefault();
$(this).toggleClass('show');
});
mainMenu.on('click touchstart', 'li.has-sub-menu.child-2', function(e) {
console.log("2nd clicked");
e.stopPropagation();
$(this).toggleClass('show');
if (isMobile || isTablet) {
return false;
} else {
return true;
}
});
mainMenu.on('click touchstart', 'li.has-sub-menu.child-2 .child-3, li.is-section.child-2 .child-3', function(e) {
console.log("3rd clicked");
return true;
});
}
}
}
}());
})(jQuery);
jQuery(document).ready(function() {
JSModule.init();
var resizeTimer, isMobile, isTablet, isDesktop;
$(window).on('resize', function(e) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
JSModule.init();
}, 250);
});
});
CSS
header.header-split .main-nav .menu {
margin: 0;
padding: 0;
position: relative
}
header.header-split .main-nav .menu>li {
display: inline-block;
margin-left: 0 !important
}
header.header-split .main-nav .menu>li.list-inline-item:not(:last-child) {
margin-right: 0
}
header.header-split .main-nav .menu>li>a {
color: #fff;
text-transform: uppercase;
padding: .8em 2em;
font-size: 1em;
display: inline-table
}
header.header-split .main-nav .menu>li>a:hover {
color: #00888b
}
header.header-split .main-nav .menu>li>a:hover>ul {
display: flex;
display: -ms-flexbox;
-webkit-transform: translateY(0);
transform: translateY(0)
}
header.header-split .main-nav .menu>li>ul {
position: fixed;
width: 100%;
left: 0;
background: #ebebeb;
padding: 3em 2em;
z-index: -1;
display: flex;
display: -ms-flexbox;
-webkit-transform: translateY(-135%);
transform: translateY(-135%);
height: 100vh;
transition: -webkit-transform .3s ease-out;
transition: transform .3s ease-out;
transition: transform .3s ease-out, -webkit-transform .3s ease-out
}
@media (max-width:767.98px) {
header.header-split .main-nav .menu>li>ul {
padding: 0;
z-index: 1
}
}
@media screen and (prefers-reduced-motion:reduce) {
header.header-split .main-nav .menu>li>ul {
transition: none
}
}
header.header-split .main-nav .menu>li>ul.sub-menu li {
display: -ms-inline-flexbox;
display: inline-flex
}
header.header-split .main-nav .menu>li>ul.sub-menu li a {
text-transform: uppercase;
font-size: 1.1em;
color: #222;
letter-spacing: .08em
}
@media (max-width:767.98px) {
header.header-split .main-nav .menu>li>ul.sub-menu li a {
padding: .5em 0 !important
}
}
header.header-split .main-nav .menu>li>ul.sub-menu li a.menu-image-block {
display: block;
background: #333;
border: 0;
border-radius: 0;
background-clip: padding-box;
display: flex;
display: -ms-flexbox;
-ms-flex-align: center;
align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
text-transform: uppercase !important;
font-family: Brandon-bold, 'MS Sans Serif', Geneva, sans-serif;
letter-spacing: .15em;
margin-bottom: 2em;
position: relative;
padding: 0 !important
}
@media (max-width:767.98px) {
header.header-split .main-nav .menu>li>ul.sub-menu li a.menu-image-block {
margin-bottom: 1em
}
}
header.header-split .main-nav .menu>li>ul.sub-menu li a.menu-image-block img {
-webkit-opacity: .6;
-moz-opacity: .6;
opacity: .6
}
header.header-split .main-nav .menu>li>ul.sub-menu li a.menu-image-block span {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 1.1em
}
@media (min-width:1800px) {
header.header-split .main-nav .menu>li>ul.sub-menu li a.menu-image-block span {
font-size: 1.25em
}
}
header.header-split .main-nav .menu>li>ul.sub-menu li a.menu-image-block:hover img {
-webkit-opacity: .8;
-moz-opacity: .8;
opacity: .8;
transition: opacity .5s ease 50ms
}
header.header-split .main-nav .menu>li>ul.sub-menu li .sub-menu li {
display: contents
}
header.header-split .main-nav .menu>li>ul.sub-menu li .sub-menu li a {
color: #555;
text-transform: capitalize;
font-size: .9em;
padding: .75em 0 0 0
}
header.header-split .main-nav .menu>li>ul.sub-menu li .sub-menu li a:hover {
color: #00888b
}
header.header-split .main-nav .menu>li>ul.sub-menu li .sub-menu li.view-all-link a {
color: #00888b
}
header.header-split .main-nav .menu>li>ul li a {
position: relative;
display: block;
text-align: left;
padding: .5em 0;
font-family: Brandon-bold, 'MS Sans Serif', Geneva, sans-serif
}
header.header-split .main-nav .menu>li>ul li a:before {
content: "";
position: absolute;
bottom: 0;
display: inline-block;
width: 100%;
height: .08em;
background-color: #ebebeb
}
@media (max-width:767.98px) {
header.header-split .main-nav .menu>li>ul li a:before {
display: none
}
}
header.header-split .main-nav .menu>li>ul li ul {
padding: 0;
text-align: left
}
header.header-split .main-nav .menu>li>ul li ul li {
display: block
}
header.header-split .main-nav .menu>li>ul li ul li a {
padding: 1em 0;
font-family: MuseoSans-300, 'MS Sans Serif', Geneva, sans-serif
}
header.header-split .main-nav .menu>li>ul li ul li a:before {
display: none
}
header.header-split .main-nav .menu>li:hover {
color: #00888b
}
header.header-split .main-nav .menu>li:hover>ul {
display: flex;
display: -ms-flexbox;
-webkit-transform: translateY(0);
transform: translateY(0)
}
@media (max-width:767.98px) {
header.header-split .main-nav .menu>li:hover>ul {
display: block
}
}
header.header-split .main-nav .menu>li:hover a {
color: #00888b
}
header.header-split .main-nav .menu>li.item-event-hover:hover>.sub-menu-dropdown {
top: 100%
}
header.header-split .main-nav .menu>li.item-event-click.item-menu-opened>.sub-menu-dropdown {
top: 100%
}
header.header-split .main-nav .menu .menu-item .sub-menu-dropdown:after {
height: 25px
}
header.header-split .main-nav .menu .callto-btn.menu-item-design-sized .sub-menu-dropdown {
margin-top: 0
}
header.header-split .main-nav .menu .callto-btn.menu-item-design-default .sub-menu-dropdown {
margin-top: 0
}
header.header-split .main-nav .menu .menu-item-design-sized .sub-menu-dropdown {
margin-top: 25px
}
header.header-split .main-nav .menu .menu-item-design-default .sub-menu-dropdown {
margin-top: 25px
}
header.header-split .main-nav .sub-menu-dropdown:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%
}
header.header-split.menu-calculated .main-nav {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
visibility: visible
}
header.header-split.act-scroll .main-nav .menu>li:hover>ul {
-webkit-transform: translateY(0);
transform: translateY(0)
}
header.header-split.act-scroll .main-nav .menu .menu-item .sub-menu-dropdown:after {
height: 15px
}
header.header-split.act-scroll .main-nav .menu .menu-item-design-sized .sub-menu-dropdown {
margin-top: 15px
}
header.header-split.act-scroll .main-nav .menu .menu-item-design-default .sub-menu-dropdown {
margin-top: 15px
}
header.header-split.act-scroll .main-nav .menu .callto-btn.menu-item-design-sized .sub-menu-dropdown {
margin-top: 0
}
header.header-split.act-scroll .main-nav .menu .callto-btn.menu-item-design-default .sub-menu-dropdown {
margin-top: 0
}
af-mobile-opened .main-nav .menu {
padding: 0
}
.af-mobile-opened .main-nav .menu li {
display: block !important;
text-align: left
}
.af-mobile-opened .main-nav .menu li.has-sub-menu:before {
color: #282828;
display: inline-block;
font: normal normal normal 14px/1 Autofinesse;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f05d";
float: right;
-webkit-transform: rotate(-90deg) translateY(-20%);
transform: rotate(-90deg) translateY(-20%);
transition: -webkit-transform .25s ease-in-out;
transition: transform .25s ease-in-out;
transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out;
right: 1.2em;
position: relative;
top: 1.1em;
font-weight: 400
}
.af-mobile-opened .main-nav .menu li.has-sub-menu.show:before {
-webkit-transform: rotate(0) translateY(0);
transform: rotate(0) translateY(0);
transition: -webkit-transform .25s ease-in-out;
transition: transform .25s ease-in-out;
transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out
}
.af-mobile-opened .main-nav .menu li>ul {
-webkit-transform: none !important;
transform: none !important;
position: relative !important;
height: auto !important
}
.af-mobile-opened .main-nav .menu li a {
padding: 1em 2em !important;
display: block !important;
height: auto !important;
line-height: initial !important;
color: #222 !important
}
.af-mobile-opened .main-nav .menu li a:hover {
color: #00888b
}
.af-mobile-opened .main-nav .menu li.has-sub-menu .sub-menu.parent-2 {
display: none;
z-index: auto
}
.af-mobile-opened .main-nav .menu li.has-sub-menu .sub-menu.parent-2 li {
display: block !important
}
.af-mobile-opened .main-nav .menu li.has-sub-menu .sub-menu.parent-2 li a {
padding: 1em 1em 1em 1.5em !important;
font-size: 1em;
border-bottom: 1px solid #ebebeb
}
.af-mobile-opened .main-nav .menu li.has-sub-menu .sub-menu.parent-2 li.has-sub-menu:last-child a {
border-bottom: 0
}
.af-mobile-opened .main-nav .menu li.has-sub-menu .sub-menu.parent-2 li .sub-menu.parent-3 {
display: none;
margin: 1em 0;
z-index: auto
}
.af-mobile-opened .main-nav .menu li.has-sub-menu .sub-menu.parent-2 li .sub-menu.parent-3 li {
display: block
}
.af-mobile-opened .main-nav .menu li.has-sub-menu .sub-menu.parent-2 li .sub-menu.parent-3 li a {
border: 0;
padding: .6em 1em .6em 1em !important
}
.af-mobile-opened .main-nav .menu li.has-sub-menu .sub-menu.parent-2 li.is-section {
padding-top: .5em
}
.af-mobile-opened .main-nav .menu li.has-sub-menu .sub-menu.parent-2 li.is-section .sub-menu.parent-3 {
z-index: auto
}
.af-mobile-opened .main-nav .menu li.has-sub-menu .sub-menu.parent-2 li.is-section .sub-menu.parent-3 li a {
padding: 0 !important;
margin: 0;
width: 100%
}
.af-mobile-opened .main-nav .menu li.has-sub-menu .sub-menu.parent-2 li.is-section:last-child {
padding-bottom: .5em;
padding-top: 0
}
.af-mobile-opened .main-nav .menu li.has-sub-menu .sub-menu.parent-2 li:last-child a {
border-bottom: 0
}
.af-mobile-opened .main-nav .menu li.has-sub-menu.show .sub-menu.parent-2 {
display: block
}
.af-mobile-opened .main-nav .menu li.has-sub-menu.show .sub-menu.parent-2 li .sub-menu.parent-3 {
display: none
}
.af-mobile-opened .main-nav .menu li.has-sub-menu.show .sub-menu.parent-2 li.show .sub-menu.parent-3 {
display: block
}
.af-mobile-opened .main-nav .menu li.is-section ul {
display: -ms-inline-flexbox !important;
display: inline-flex !important;
margin: 0 !important
}
.af-mobile-opened .main-nav .menu li.is-section ul li {
padding: 0
}
.af-mobile-opened .main-nav .menu li.is-section ul li a.menu-image-block {
padding: 0 !important;
width: 100%;
display: -ms-inline-flexbox !important;
display: inline-flex !important;
color: #fff !important
}
.main-nav .menu>li>a {
height: 110px;
line-height: 110px
}
.act-scroll .main-nav .menu>li>a {
height: 75px;
line-height: 75px
}
解决方案
推荐阅读
- python - 我的 LSTM 模型精度只有 0.5 左右
- javascript - 使用 JavaScript 对象构造函数更改文本颜色
- openstack - 不支持 Openstack Cinder 版本
- arrays - 6 个位置内 3 个元素的排列
- scala - 我的第一个 Scala 连接在套接字处重置。
- javascript - 从另一个对象插入嵌套属性
- linux - 使用 rsync 从复杂的文件结构中写入特定数据
- java - 按主键 ID 查找对象列表 - Apache Cayenne
- reactjs - 无法在 docker 容器外 ping 端口 80 - recv 失败 - 对等方重置连接
- maven - 如何从本地 jar 下载 gradle 依赖项