如何打开Wordpress SubMenu

-1

我正在WordPress中定制一个网站，我被困在移动响应菜单中。我希望我的菜单可以触摸到打开子菜单，但是我可以同时看到所有菜单和子菜单，我也希望菜单打开一半而不是全屏打开。这是我的网站link 如何打开Wordpress SubMenu

此媒体查询隐藏子菜单，但如何打开子菜单时触摸移动？

@media screen and (max-width: 990px) { 
    .sub-menu {display: none !important;} 

}

这是我的菜单CSS代码：

.store-menu { 
    background: #0bb1af none repeat scroll 0 0; 
} 
.main-navigation { 
    clear: both; 
    display: block; 
    float: left; 
    width: 100%; 
} 

.main-navigation ul { 
    list-style: none; 
    margin: 0; 
    padding-left: 0; 
} 
.main-navigation ul.menu li::before { 
    border-right: 1px solid #099896; 
    content: ""; 
    height: 100%; 
    position: absolute; 
    right: -2px; 
    top: 0; 
} 
.main-navigation ul.menu li:last-child::before { 
    border-right: none; 
} 

.main-navigation li { 
    display: inline-block; 
    font-family: "Lato"; 
    font-size: 16px; 
    font-weight: normal; 
    position: relative; 
    text-transform: uppercase; 
    transition: all ease-in-out 0.3s; 
    -webkit-transition: all ease-in-out 0.3s; 
    -moz-transition: all ease-in-out 0.3s; 
} 
.main-navigation li a { 
    display: block; 
    text-decoration: none; 
    padding: 15px; 
    color: #fff; 
} 

.main-navigation ul ul { 
    background: #0bb1af; 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); 
    position: absolute; 
    top: 110%; 
    left: 0; 
    min-width: 200px; 
    white-space: nowrap; 
    border-bottom-left-radius: 3px; 
    border-bottom-right-radius: 3px; 
    transition: all ease-in-out 0.3s; 
    -webkit-transition: all ease-in-out 0.3s; 
    -ms-transition: all ease-in-out 0.3s; 
    opacity: 0; 
    visibility: hidden; 
    z-index: 99999; 
} 
.main-navigation ul li:hover > ul.sub-menu { 
    top: 100%; 
    opacity: 1; 
    filter: Alpha(opacity= 100); 
    visibility: visible; 
} 
.main-navigation ul ul.sub-menu li:before { 
    border-right: none; 
    } 
.main-navigation ul ul.sub-menu li { 
    display: block; 
    border-bottom: 1px solid #00908d; 
    position: relative; 
} 
.main-navigation ul ul.sub-menu li:last-child { 
    border-bottom: none; 
} 
.main-navigation ul ul.sub-menu li a { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    /*margin-bottom: 5px;*/ 
    font-size: 14px; 
    } 
.main-navigation ul ul.sub-menu li ul { 
    position: absolute; 
    left: 110%; 
    top: 0; 
    border-bottom-left-radius: 0; 
    border-top-right-radius: 5px; 
    } 
.main-navigation ul ul.sub-menu li:hover ul { 
    left: 100%; 
    top: 0; 
    } 

.main-navigation ul ul li:hover > ul, 
.main-navigation ul ul li.focus > ul { 
    left: 100%; 
    top: 100%; 
} 

.nav-menu li a:hover, .main-navigation .current_page_item > a, 
.main-navigation .current-menu-item > a, 
.main-navigation .current_page_ancestor > a { 
    background: #1B8E8D; 
} 
.main-navigation ul li:last-child ul { 
    left: inherit; 
    right: 0; 
} 

.main-navigation ul li:last-child ul ul { 
    left: inherit; 
    right: 110%; 
} 

.main-navigation ul li:last-child ul li:hover ul { 
    border-radius: 5px 0 0 5px; 
    left: inherit; 
    right: 100%; 
} 

@media screen and (min-width: 37.5em) { 
    .menu-toggle { 
     display: none; 
    } 
    .main-navigation 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%; 
    }

来源

2017-09-15 Moiez Malik

下面试试这个代码。

它只是将一个点击函数绑定到您的#primary-menu所有具有.menu-item-has-children的元素。如果你点击这个，它会得到最接近的ul，并检查class是否为sub-menu。如果没有，则会阻止点击和display: block !important的sub-menu。

希望这可以帮助你。

jQuery('#primary-menu .menu-item-has-children').click(function(event) { // Bind click function 
    var clickedElement = jQuery(event.target.closest('ul')); // find which element is clicked 
    if (clickedElement.attr("class") != "sub-menu" && window.matchMedia('(max-width: 767px)').matches) { // If the element is NOT a sub-menu and the width of the screen is below 990px 
     event.preventDefault(); // prevent the user from accessing it 
     jQuery(this).find('.sub-menu').attr('style','display: block !important'); // and display the sub-menu 
    } 
});

你可以添加一些东西，将删除所有其他sub-menu的的display: block !important。像这里面的点击功能：

来源

2017-09-15 05:33:16

谢谢，它的工作。我是jQuery的新手，我如何关闭子菜单？你提到一个else语句，但它不起作用，我还可以在jQuery菜单中添加+吗？其他{jQuery（this）.find（'。sub-menu'）。attr（'style'，'display：none！important'）; } –

对不起，不需要'else'。只需添加：'jQuery（'＃primary-menu .menu-item-has-children'）。find（'。sub-menu'）。attr（'style'，'display：none'）;'点击功能。 –

@MoiezMalik有用吗？ –

如何打开Wordpress SubMenu

回答

相关问题