Есть меню в мобильной версии сайта с кнопкой открытия/закрытия. Нужно, чтобы после клика по любому пункту меню - меню сворачивалось, как если бы я нажал на кнопку закрытия меню. Сейчас же проблема в том, что ссылки в меню - это ссылки на якори внутри одной страницы и после плавного перемещения к якорю меню остается открытым и мешает просмотру, пока его сам не закроешь.
То есть, по клику на любой элемент списка #hmenu_load_1 .hmenu_navigation_holder ul li
- меню бы сворачивалось.
Вот структура меню:
<div id="hmenu_load_1" class="hmenu_load_menu hmenu_unique_menu_1" data-menu-id="1">
<div id="hmenu_holder_1" class="hmenu_main_holder hmenu_main_bg_color" data-sticky="yes" data-activate="1000" data-height="40">
<div class="hmenu_center" style="left: 50px; margin-left: -50px; display: table;">
<div class="hmenu_navigation_holder" style="display: block;">
<ul class="hmenu_navigation_root hmenu_hover_color hmenu_underline_hover">
<li class="">
<a href="#greenhouse" target="_self" title="">
<div class="hmenu_no_sub hmenu_wrap hmenu_nav_uni_9">
<span>Парниковая</span>
</div>
</a>
<div class="hmenu_item_devider"></div>
</li>
</ul>
</div>
</div>
</div>
</div>
А вот структура кнопки (кнопка - это hmenu_wrap icon_hero_default_thin_e645
):
<div class="hmenu_right">
<!-- BEGIN: TOGGLE -->
<div class="hmenu_toggle_holder hmenu_mobile_show" data-toggle="open">
<div class="hmenu_grp_devider"></div>
<ul class="hmenu_hover_color">
<li>
<a>
<div class="hmenu_wrap icon_hero_default_thin_e645"></div>
</a>
</li>
</ul>
</div>
<!-- END: TOGGLE -->
</div>
Если я верно нашел, то вот код открытия/закрытия меню по кнопке:
jQuery('.hmenu_navigation_holder').each(function(){
var the_parent = jQuery(this).parents('.hmenu_inner_holder');
jQuery(the_parent).children('.hmenu_right').children('.hmenu_toggle_holder').off().on('click', function(){
if(!jQuery(this).attr('data-toggle') || jQuery(this).attr('data-toggle') == 'close'){
jQuery(this).attr('data-toggle', 'open');
//open
jQuery(the_parent).children('div').children('.hmenu_navigation_holder').hide().slideDown( 'slow', function() {
});
} else if(jQuery(this).attr('data-toggle') == 'open'){
jQuery(this).attr('data-toggle', 'close');
//close
jQuery(the_parent).children('div').children('.hmenu_navigation_holder').css({ 'display':'block'});
jQuery(the_parent).children('div').children('.hmenu_navigation_holder').slideUp( 'slow', function() {
jQuery(this).css({ 'display':'none'});
});
}
});
});
Решил проблему сам, добавив код:
jQuery("#hmenu_load_1 .hmenu_navigation_holder ul").click(function() {
jQuery(".hmenu_navigation_holder").css({ 'display':'none'});
jQuery(".hmenu_mobile_show").attr('data-toggle', 'close');
});
UPDATE. Немного анимации:
jQuery("#hmenu_load_1 .hmenu_navigation_holder ul").click(function() {
jQuery('.hmenu_navigation_holder').slideUp( 'fast', function() {
jQuery(this).css({ 'display':'none'});
);
jQuery(".hmenu_mobile_show").attr('data-toggle', 'close');
});
Виртуальный выделенный сервер (VDS) становится отличным выбором
Использую виджет Uploadify https://githubcom/yiiext/uploadify-widget для yii