[英]Close off-canvas mobile menu when link is clicked (JS)
I have a mobile menu that has some anchored links that scroll to a certain section of the page when clicked. 我有一个移动菜单,其中包含一些锚定的链接,单击这些链接可以滚动到页面的特定部分。 The problem with this is when I click one of these links, due to the fact that a new page is not loading, the menu remains open.
问题是当我单击这些链接之一时,由于未加载新页面,菜单保持打开状态。
I wish to implement a solution whereby if one of these links are clicked, the menu closes by default. 我希望实现一种解决方案,如果单击这些链接之一,则默认情况下将关闭菜单。 I have tried to hide the menu on click using JS but I think my logic may be wrong.
我试图使用JS隐藏单击菜单,但我认为我的逻辑可能是错误的。 Any help would be great.
任何帮助都会很棒。
Here is the code for my menu. 这是我菜单的代码。
<div id="my-id" class="uk-offcanvas custom_canvas">
<div class="uk-offcanvas-bar">
<div class="uk-panel">
<a class="btn btn primary remove_image-div" onclick="UIkit.offcanvas.hide([force = false]);">
<img src="img/remove_icon.png" class="remove_image" alt="remove">
</a>
<ul class="mm-list mm-panel mm-opened mm-subopened" id="mm-0">
<li class="offcanvas_li">
<a class="offcanvas_open" title="Samples" href="index.html#sample-section">Samples</a>
</li>
<li class="offcanvas_li">
<a href="index.html#package-section" title="Packages" class="offcanvas_open">Packages</a>
</li>
<li class="offcanvas_li">
<a href="#about-section" title="About" class="offcanvas_open">About</a>
</li>
<li class="offcanvas_li">
<a href="contact.html" title="Contact" class="offcanvas_open">Contact</a>
</li>
<li class="offcanvas_li">
<a href="blog.html" title="Blog" class="offcanvas_open">Blog</a>
</li>
<li class="offcanvas_li">
<a class="offcanvas_open" title="We Love" href="we_love.html">We Love</a>
</li>
</ul>
</div>
</div>
</div>
I'm not familiar with UIkit.offcanvas
plugin but with a little sense I can answer you that you can add them (the links) all the attribute onclick="UIkit.offcanvas.hide([force = false]);"
我对
UIkit.offcanvas
插件不熟悉, UIkit.offcanvas
某种意义上讲,我可以回答你可以将它们的所有属性(链接)添加到onclick="UIkit.offcanvas.hide([force = false]);"
A better (generic) solution is to "listen" to their click
event, then, run offcanvas command. 更好的 (通用)解决方案是“监听”其
click
事件,然后运行offcanvas命令。
Something like: 就像是:
$('.offcanvas_li a').click(function() {
UIkit.offcanvas.hide([force = false]);
});
This works 这有效
<script>
function myFunction() {
UIkit.offcanvas.hide([force = false])
}</script>
<button onclick="myFunction()">Close Panel</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.