jquery - Any way to automatically close the hamburger menu on :focus with jQuery?
问题描述
I have the following source code of a mobile hamburger menu:
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div data-id="da3c1dd" class="elementor-element elementor-element-da3c1dd elementor-widget elementor-widget-spacer" data-element_type="spacer.default">
<div class="elementor-widget-container">
<div class="elementor-spacer">
<div class="elementor-spacer-inner"></div>
</div>
</div>
</div>
<div data-id="5fa72fd" class="elementor-element elementor-element-5fa72fd elementor-widget elementor-widget-heading" id="regulation-menu-mobile" data-element_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><a href="#regulation-mobile"><span class="menu-item-text"><span align="center">?מהי רגולציה</span></span></a></h4> </div>
</div>
<div data-id="4e7c2bc" class="elementor-element elementor-element-4e7c2bc elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><a href="#aboutmemobile"><span class="menu-item-text"><span align="center">אודות</span></span></a></h4> </div>
</div>
<div data-id="45788e2" class="elementor-element elementor-element-45788e2 elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><a href="#fit-mobile"><span class="menu-item-text"><span align="center">?למי זה מתאים</span></span></a></h4> </div>
</div>
<div data-id="2a24b44" class="elementor-element elementor-element-2a24b44 elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><a href="#solution-mobile"><span class="menu-item-text"><span align="center">פתרונות</span></span></a></h4> </div>
</div>
<div data-id="fcd1ddb" class="elementor-element elementor-element-fcd1ddb elementor-widget elementor-widget-heading" id="contact-menu-mobile" data-element_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><a href="#contact-mobile"><span class="menu-item-text"><span align="center">צור קשר</span></span></a></h4> </div>
</div>
<section data-id="23d1d02" class="elementor-element elementor-element-23d1d02 elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-inner-section" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<div data-id="b6d5052" class="elementor-element elementor-element-b6d5052 column-contact elementor-column elementor-col-100 elementor-inner-column" data-element_type="column">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div data-id="4f72658" class="elementor-element elementor-element-4f72658 mobilemenucontact elementor-widget elementor-widget-text-editor" id="mobilemenucontact" data-element_type="text-editor.default">
<div class="elementor-widget-container">
<div class="elementor-text-editor elementor-clearfix"><p class="makeSmall" style="text-align: center;"><img class="email-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-1.svg" width="33" height="33"> <img class="facebook-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-2.svg" width="33" height="33"> <label style="color: #61f6ff;" data-mce-fragment="1">| <span style="color: #001a71;" data-mce-fragment="1"> 052-6582643</span></label></p></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
Basically when the user presses one of the links in the menu on the phone mobile, the menu remains open and the user has to close it. What I want to achieve is to make the menu close after pressing one of the links on mobile. How is that possible with jQuery?
Here's the website: www.mayabarber.co.il Thanks!
解决方案
Write this code in functions.php of your child theme.
add_action( 'wp_footer', 'change_hamburger', 999 );
function change_hamburger() { ?>
<script>
jQuery(document).ready(function() {
jQuery( '.elementor-nav-menu .menu-item a' ).on("click", function(){
jQuery('.elementor-menu-toggle').removeClass("elementor-active");
});
});
</script>
<?php }
推荐阅读
- c++ - 我似乎无法获得在两个 .cpp 文件中保持一致的值
- ios - 缺少 DSYM 来处理崩溃
- python - 摘要没有名为的列
- java - 更改 {if} statemets to try...catch
- javascript - firebase 规则允许新用户在第一次登录时创建其帐户对象
- android - inAppBrowser 无法显示,但在 chrome 中工作正常
- sql - 使用增量列更新
- c# - 在keydown事件中使用回车键时如何在C#winform中设置datagridview滚动位置?
- angularjs - Spring Boot 应用程序仅针对 Angular/HTML/JSP 资源提供“405 方法不支持”异常
- python - 如何将形状(3,3)的张量流图像值输入具有形状(?,2)的目标