Свернуть меню после клика по пункту меню

128
17 мая 2019, 12:40

Есть меню в мобильной версии сайта с кнопкой открытия/закрытия. Нужно, чтобы после клика по любому пункту меню - меню сворачивалось, как если бы я нажал на кнопку закрытия меню. Сейчас же проблема в том, что ссылки в меню - это ссылки на якори внутри одной страницы и после плавного перемещения к якорю меню остается открытым и мешает просмотру, пока его сам не закроешь. То есть, по клику на любой элемент списка #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'});
            });                 
        }
    });
});
Answer 1

Решил проблему сам, добавив код:

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');
});
READ ALSO