单击链接后，关闭移动版本中的菜单

Question

I have a problem with automatically closing the menu in the mobile version after clicking on the link. I tried to extract the appropriate code from the page source.

<div id="sidr" style="left: -260px;" data-sidr-side="left">
    <div class="sidr-inner">
        <a href="#sidr-close"
            class="dl-trigger dfd-sidr-close dfd-socicon-cross-24"></a>
    </div>
    <div class="sidr-widgets">
        <div class="widget soc-icons" style="display: none;">
            <a href="#" class="fb dfd-socicon-facebook" title="Facebook"
                target="_blank"></a><a href="#" class="in dfd-socicon-instagram"
                title="Instagram" target="_blank"></a>
        </div>
    </div>
</div>
<a href="#sidr-close" class="dl-trigger dfd-sidr-close"></a>

<div id="header">

    <div class="header-wrap">
        <div class="row">
            <div class="twelve columns">

                <nav class="mega-menu  text-right" id="main_mega_menu">
                    <ul id="menu-menu" class="nav-menu menu-primary-navigation menu-clonable-for-mobiles">
                      <li id="nav-menu-item-22009-5c2f191e565a3" class="mega-menu-item nav-item menu-item-depth-0 current-menu-item "><a href="/#section-#home" class="menu-link main-menu-link item-title"><span>Home</span></a></li>
                      <li id="nav-menu-item-22489-5c2f191e56710" class="mega-menu-item nav-item menu-item-depth-0 current-menu-item "><a href="/#section-#publikacje" class="menu-link main-menu-link item-title"><span>Publikacje</span></a></li>
                      <li id="nav-menu-item-22012-5c2f191e56812" class="mega-menu-item nav-item menu-item-depth-0 current-menu-item "><a href="/#section-#pracownia" class="menu-link main-menu-link item-title"><span>Pracownia</span></a></li>
                      <li id="nav-menu-item-22011-5c2f191e56929" class="mega-menu-item nav-item menu-item-depth-0 current-menu-item "><a href="/#section-#oferta" class="menu-link main-menu-link item-title"><span>Oferta</span></a></li>
                      <li id="nav-menu-item-22010-5c2f191e56a43" class="mega-menu-item nav-item menu-item-depth-0 current-menu-item "><a href="#section-#kontakt" class="menu-link main-menu-link item-title"><span>Kontakt</span></a></li>
                    </ul>
                </nav>

                <div class="dfd-header-buttons-cover">
                    <div class="dfd-header-buttons-wrap">
                        <div class="dl-menuwrapper">
                            <a href="#sidr" class="dl-trigger icon-mobile-menu"
                                id="mobile-menu"><span class="icon-wrap dfd-middle-line"></span><span
                                class="icon-wrap dfd-top-line"></span><span
                                class="icon-wrap dfd-bottom-line"></span></a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>

I tried to use this code but it does not work

$(document).on('click','.menu-link.in',function(e) {
    if( $(e.target).is('a') ) {
        $(this).sidr-close('hide');
    }
});

Link site: Link to the page

Please help!

Answer 1

Try This way

jQuery('#main_mega_menu li a').click(function(){
    jQuery(this).parents('#header-container').toggleClass('active')
})

OR

jQuery(document).ready(function(){
    jQuery('#sidr li a').click(function(){
        jQuery(this).parents('#sidr').find('.dl-trigger').trigger("click")
    });
})

Document on off

jQuery(document).off('click', '#sidr li a');
jQuery(document).on('click', '#sidr li a', function () {
  jQuery(this).parents('#sidr').find('.dl-trigger').trigger("click")
});