单击菜单项如何在移动设备中隐藏菜单？

Question

我有一个单页的网站。我有一个带有平滑滚动的菜单。当用户点击服务时，它将以平滑滚动为目标服务部分。桌面上没有问题。

我们来谈谈移动

在移动设备中，菜单显示如下

当我点击汉堡包图标时，它会显示如下

现在问题在于平滑滚动。当我点击服务时，它会以平滑滚动的方式定位服务部分，但菜单仍显示在手机上。

点击菜单时，我必须隐藏菜单。

您可以查看我的[code here][3] https://jsfiddle.net/vqpyt5co/

Answer 1

添加以下代码以触发关闭下拉列表的点击事件。

if ($(".x_mark_img").is(":visible")) {
    $(".x_mark_img").click();
}

查看更新的fiddle

$(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
        if ($(".x_mark_img").is(":visible")) {
            $(".x_mark_img").click();
        }
          $('html, body').animate({
            scrollTop: target.offset().top-80
          }, 1000);
          return false;
        }
      }
    });
  });