WordPressのサブメニューを開く方法

Question

WordPressでウェブサイトをカスタマイズしていますが、モバイル対応メニューが表示されません。私は私のメニューがサブメニューを開くために触れることができますが、代わりに、私はすべてのメニューとサブメニューが同時に表示されても、私はメニューがフルスクリーンで開くのではなく半分を開くようにしたい。これは私のウェブサイトですlink

このメディアクエリはサブメニューを非表示にしますが、モバイルでタッチするとどのようにサブメニューを開くことができますか？

@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%; 
    } 

Answer 1

は、以下のこのコードを試してみてください。

.menu-item-has-childrenのすべての要素に#primary-menuのクリック機能をバインドするだけです。これをクリックすると、最も近い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を削除します何かを追加することができます。このようにクリック機能の内側：