css мобильное подменю не будет расширяться при нажатии

У меня есть мобильное меню с одним подменю в http://plushdesign.net/plush5/contact/. По какой-то причине она перестала расширяться при нажатии на мобильном телефоне (на всех страницах сайта - я использую эту страницу bc, она не имеет js).css мобильное подменю не будет расширяться при нажатии

Основной HTML (обрезается для простоты) является:

<ul id="primary-main-menu" class="menu" style="display: block;"> 
<li id="menu-item-2099" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2099"> 
<li id="menu-item-1901" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1901 hover"> 
    <a class="parent" href="http://plushdesign.net/plush5/work/">Work</a> 
     <ul class="sub-menu"> 
     <li id="menu-item-2105" class="hide menu-item menu-item-type-post_type menu-item-object-page menu-item-2105"> 
     <li id="menu-item-2104" class="hide menu-item menu-item-type-post_type menu-item-object-page menu-item-2104"> 
     </ul> 
</li> 
</ul>

соответствующий КСС:

#primary-main-menu li.hide, 
ul#primary-main-menu.menu li.hover ul.sub-menu li.hide { 
    visibility: visible; 
} 

#primary-main-menu > li.hover > ul, 
#primary-main-menu li li.hover > ul, 
#primary-main-menu li:hover ul, 
#primary-main-menu li.hover a ul { 
    display: block !important; 
    position: static !important; 
    visibility: visible !important; 
}

Я посмотрел везде и перепробовал все комбинации селекторов я могу думать, и косяк найти, почему он прекратил падение ... может кто-то помочь? Спасибо.

источник

2016-04-10 user3106358

@SebastienDaniel посмотреть еще раз – Aziz

@SebastienDaniel согласен с @Aziz, есть классы называется '.hover' нет состояния. –

Я думаю, что проблема заключается в том, что внутри подменю 'li' ul есть 'display: none', вам нужно будет включить их с # main-main-menu li ul li {display: block! Important}'. Я никогда не видел так много правил '! Important' с тех пор ... – Aziz

Кажется, что есть проблема в вашем mobile-menu.js, не переключая классы hide в li элементов внутри .sub-menu, при нажатии .parent. Предположим, что он синхронизируется с классом .hover, который переключается в .menu-item при нажатии.

Попробуйте вручную удалить класс hide в каждом подблоке у инспектора браузера, и он работает.

Что-то вроде

$("#primary-main-menu li a.parent").unbind('click').bind('click', function(e) { 
    e.preventDefault(); 
    $(this).parent("li").toggleClass("hover"); 
    $(this).next('.sub-menu').find('li').toggleClass("hide") // <<< line added 
});

источник

2016-04-10 21:07:32

Я удалил класс hide вместе и переформатирую на рабочем столе. отсюда я смог заставить его работать. Спасибо! – user3106358

Отличный, рад, что он работает сейчас. Итак, ответ правильный? –

Лучший способ получить OnClick подменю вы должны использовать JavaScript/JQuery. Вот демо. Быстро и просто.

jQuery(function($){ 
    $('#trigger').click(function(){ 
    $('#hide').toggleClass('expand') 
    }) 
})

DEMO

источник

2016-04-11 02:10:20 Fiido93

css мобильное подменю не будет расширяться при нажатии

ответ

Смежные вопросы