如何实现点击菜单链接后自动关闭Burger Menu

安全阿岳

2026-7-10

问题：点击汉堡菜单内链接后菜单不自动关闭的解决方法

问题描述

我正在制作一款全屏显示的Burger Menu，点击汉堡按钮可正常展开菜单，但点击菜单内的任意链接后，已展开的菜单仍处于可见状态。请问如何实现点击链接后菜单自动关闭并恢复至默认状态？

我使用的是DIVI Builder进行开发。

当前代码

JavaScript代码

jQuery(function($){
$('#slide-in-open').click(function(){
$(this).toggleClass('open');
$('.slide-in-menu-container').toggleClass('slide-in-menu');
});
    });

CSS代码

#slide-in-open{
cursor: pointer;
}
 
.line{
display: block;
position: absolute;
right:10px;
height: 3px;
width: 30px;
background: #fff;
border-radius: 9px;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
 
.line-2 {
top: 8px;
}
 
.line-3 {
top: 16px;
}
 
#slide-in-open.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
 
#slide-in-open.open .line-2 {
display: none;
}
 
#slide-in-open.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
 
.slide-in-menu {
right: 0 !important;
opacity: 1 !important;
}
 
.slide-in-menu-container {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

HTML代码

<header class="et-l et-l--header">
            <div class="et_builder_inner_content et_pb_gutters3">
        <div class="et_pb_section et_pb_section_0_tb_header et_pb_sticky_module et_section_regular" style="">
                
                
                
                
                
                
                <div class="et_pb_row et_pb_row_0_tb_header et_pb_gutters2 et_pb_row_6col">
                <div class="et_pb_column et_pb_column_1_6 et_pb_column_0_tb_header  et_pb_css_mix_blend_mode_passthrough">
                
                
                
                
                <div class="et_pb_module et_pb_text et_pb_text_0_tb_header et_clickable  et_pb_text_align_left et_pb_bg_layout_light">
                
                
                
                
                <div class="et_pb_text_inner"><p>Leistungen</p></div>
            </div>
            </div><div class="et_pb_column et_pb_column_1_6 et_pb_column_1_tb_header  et_pb_css_mix_blend_mode_passthrough">
                
                
                
                
                <div class="et_pb_module et_pb_text et_pb_text_1_tb_header et_clickable  et_pb_text_align_left et_pb_bg_layout_light">
                
                
                
                
                <div class="et_pb_text_inner"><p>Sortiment</p></div>
            </div>
            </div><div class="et_pb_column et_pb_column_1_6 et_pb_column_2_tb_header  et_pb_css_mix_blend_mode_passthrough et_pb_column_empty">
                
                
                
                
                
            </div><div class="et_pb_column et_pb_column_1_6 et_pb_column_3_tb_header  et_pb_css_mix_blend_mode_passthrough et_pb_column_empty">
                
                
                
                
                
            </div><div class="et_pb_column et_pb_column_1_6 et_pb_column_4_tb_header  et_pb_css_mix_blend_mode_passthrough">
                
                
                
                
                <div class="et_pb_module et_pb_text et_pb_text_2_tb_header et_clickable  et_pb_text_align_left et_pb_bg_layout_light">
                
                
                
                
                <div class="et_pb_text_inner"><p>Einblicke</p></div>
            </div>
            </div><div class="et_pb_column et_pb_column_1_6 et_pb_column_5_tb_header  et_pb_css_mix_blend_mode_passthrough et-last-child">
                
                
                
                
                <div class="et_pb_module et_pb_text et_pb_text_3_tb_header et_clickable  et_pb_text_align_left et_pb_bg_layout_light">
                
                
                
                
                <div class="et_pb_text_inner"><p>Kontakt</p></div>
            </div>
            </div>
                
                
                
                
            </div><div class="et_pb_row et_pb_row_1_tb_header">
                <div class="et_pb_column et_pb_column_4_4 et_pb_column_6_tb_header  et_pb_css_mix_blend_mode_passthrough et-last-child">
                
                
                
                
                <div class="et_pb_module et_pb_image et_pb_image_0_tb_header">
                
                
                
                
                <a href="/#top"><span class="et_pb_image_wrap "><img decoding="async" src="https://diebrillenboutique.de/wp-content/uploads/Gruppe-52.svg" alt="" title="Gruppe 52" class="wp-image-518"></span></a>
            </div>
            </div>
                
                
                
                
            </div>
                
                
            </div><div class="et_pb_section et_pb_section_1_tb_header slide-in-menu et_pb_with_background et_section_regular et_pb_section--absolute">
                
                
                
                
                
                
                <div class="et_pb_row et_pb_row_2_tb_header et_pb_equal_columns">
                <div class="et_pb_column et_pb_column_1_3 et_pb_column_7_tb_header  et_pb_css_mix_blend_mode_passthrough">
                
                
                
                
                <div class="et_pb_module et_pb_image et_pb_image_1_tb_header">
                
                
                
                
                <a href="/#top"><span class="et_pb_image_wrap "><img decoding="async" loading="lazy" width="367" height="157" src="https://diebrillenboutique.de/wp-content/uploads/Logo_Brillen_Boutique-weiss-1.png" alt="" title="Logo_Brillen_Boutique-weiss" srcset="https://diebrillenboutique.de/wp-content/uploads/Logo_Brillen_Boutique-weiss-1.png 367w, https://diebrillenboutique.de/wp-content/uploads/Logo_Brillen_Boutique-weiss-1-300x128.png 300w" sizes="(max-width: 367px) 100vw, 367px" class="wp-image-209"></span></a>
            </div>
            </div><div class="et_pb_column et_pb_column_1_3 et_pb_column_8_tb_header  et_pb_css_mix_blend_mode_passthrough">
                
                
                
                
                <div class="et_pb_module et_pb_code et_pb_code_0_tb_header">

                    
                    
                    
            </div>
            </div><div class="et_pb_column et_pb_column_1_3 et_pb_column_9_tb_header  et_pb_css_mix_blend_mode_passthrough et-last-child">
                
                
                
                
                <div id="slide-in-open" class="et_pb_module et_pb_text et_pb_text_4_tb_header et_pb_text_align_left et_pb_bg_layout_light open">
                
                
                
                
                <div class="et_pb_text_inner"><p><span class="line line-1"></span><br><span class="line line-2"></span><br><span class="line line-3"></span></p></div>
            </div>
            </div>
                
                
                
                
            </div><div class="et_pb_row et_pb_row_3_tb_header slide-in-menu-container et_pb_gutters1 slide-in-menu">
                <div class="et_pb_column et_pb_column_4_4 et_pb_column_10_tb_header  et_pb_css_mix_blend_mode_passthrough et-last-child">
                
                
                
                
                <div class="et_pb_module et_pb_text et_pb_text_5_tb_header et_clickable  et_pb_text_align_left et_pb_bg_layout_light">
                
                
                
                
                <div class="et_pb_text_inner"><p>Leistungen</p></div>
            </div><div class="et_pb_module et_pb_text et_pb_text_6_tb_header et_clickable  et_pb_text_align_left et_pb_bg_layout_light">
                
                
                
                
                <div class="et_pb_text_inner">Sortiment</div>
            </div><div class="et_pb_module et_pb_text et_pb_text_7_tb_header et_clickable  et_pb_text_align_left et_pb_bg_layout_light">
                
                
                
                
                <div class="et_pb_text_inner">Einblicke</div>
            </div><div class="et_pb_module et_pb_text et_pb_text_8_tb_header et_clickable  et_pb_text_align_left et_pb_bg_layout_light">
                
                
                
                
                <div class="et_pb_text_inner">Kontakt</div>
            </div>
            </div>
                
                
                
                
            </div>
                
                
            </div>
                
                
            </div>
                
                
            </div>      </div>
    </header>

解决方法

在原有JavaScript代码中添加菜单链接的点击监听，点击时直接移除汉堡按钮和菜单容器的展开类即可，修改后的代码如下：

jQuery(function($){
  // 汉堡按钮点击切换菜单状态
  $('#slide-in-open').click(function(){
    $(this).toggleClass('open');
    $('.slide-in-menu-container').toggleClass('slide-in-menu');
  });

  // 菜单链接点击关闭菜单
  $('.slide-in-menu-container .et_clickable').click(function(){
    $('#slide-in-open').removeClass('open');
    $('.slide-in-menu-container').removeClass('slide-in-menu');
  });
});

代码说明

新增的监听事件针对菜单容器内所有带et_clickable类的元素（即你的菜单链接模块）
点击时直接移除对应的类，将菜单恢复到收起状态，无需使用toggleClass，因为此时菜单必然处于展开状态

内容的提问来源于stack exchange，提问作者Jeffrey Generalao

如何实现点击菜单链接后自动关闭Burger Menu

问题描述 #

当前代码 #

JavaScript代码 #

CSS代码 #

HTML代码 #

解决方法 #

代码说明 #