单击链接时关闭画布外移动菜单（JS）答案

【问题标题】：Close off-canvas mobile menu when link is clicked (JS)单击链接时关闭画布外移动菜单（JS）
【发布时间】：2016-02-14 13:08:14
【问题描述】：

我有一个移动菜单，其中有一些锚定链接，单击时会滚动到页面的某个部分。问题在于，当我单击其中一个链接时，由于未加载新页面，菜单仍处于打开状态。

我希望实现一个解决方案，如果单击其中一个链接，菜单默认关闭。我曾尝试使用 JS 隐藏单击菜单，但我认为我的逻辑可能是错误的。任何帮助都会很棒。

这是我的菜单的代码。

<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>

【问题讨论】：

标签： javascript jquery menu navigation off-canvas-menu

【解决方案1】：

我不熟悉UIkit.offcanvas 插件，但我可以回答你，你可以添加它们（链接）所有属性onclick="UIkit.offcanvas.hide([force = false]);"

更好的（通用）解决方案是“监听”他们的click 事件，然后运行 offcanvas 命令。

类似：

$('.offcanvas_li a').click(function() {
   UIkit.offcanvas.hide([force = false]);
});

【讨论】：

您好，感谢您的回复。我刚试过这个，它似乎不起作用。我之前尝试过类似的方法，但无法正常工作。
console 中有任何错误吗？你能创建一个snippet 或bin 吗？或者更好的是，您是否有一个公共 URL，以便我可以尝试调试它？
嗨，莫什。我找到了一个使用 id 来触发效果的 JS 文件。我复制了这段代码，并在头脑中添加了你的建议，它似乎奏效了。非常感谢！
谢谢！根据我的上下文进行一些调整：$('.uk-offcanvas a').click(() => { window.UIkit.offcanvas.hide() })

【解决方案2】：

这行得通

    <script>
  function myFunction() {
  UIkit.offcanvas.hide([force = false])
  }</script>
<button onclick="myFunction()">Close Panel</button>

【讨论】：