Javascript 使用下拉菜单上的锚定标记进行页面导航

我目前正在构建一个顶部导航栏，在一些导航项目上显示悬停下拉菜单。 现在看起来是这样的

$（文档）.ready（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）；
});
常量$dropdown=$（“.dropdown”）；
常量$dropdownToggle=$（“.dropdownToggle”）；
常量$dropdownMenu=$（“.dropdownMenu”）；
const showClass=“show”；
$（窗口）。打开（“加载调整大小”，函数（）{
如果（此.matchMedia（（（最小宽度：768px）”）.matches）{
$dropdown.hover(
函数（）{
const$this=$（this）；
$this.addClass（showClass）；
$this.find（$dropdownttoggle.attr（“aria expanded”、“true”）；
$this.find（$dropdownMenu）.addClass（showClass）；
},
函数（）{
const$this=$（this）；
$this.removeClass（showClass）；
$this.find（$dropdownttoggle.attr（“aria展开”、“false”）；
$this.find（$dropdownMenu.removeClass（showClass））；
}
);
}否则{
$dropdown.off（“mouseenter mouseleave”）；
}
});

.navbar{
背景色：黑色；
左：5vw；
右：4vw；
}
.导航栏.导航项{
文本对齐：居中；
填充顶部：40px；
填充底部：40px；
}
.导航栏.导航项目.导航链接{
颜色：白色；
字号：18px；
字体系列：“Roboto”；
字体大小：粗体；
}
.navbar.nav项.导航链接：悬停{
颜色：红色；
文字装饰：无；
}
.导航栏.导航项目a:悬停{
颜色：#4c；
}
.navbar.nav项：非（：最后一个子项）{
右边距：5px；
}
.下拉切换：：之后{
过渡：0.15s线性变换；
内容：无；
}
.show.dropdown.dropdown切换：：之后{
转换：translateY（3px）；
}
.下拉菜单{
边缘顶部：5px；
边框顶部：5px纯红；
边界半径：0；
填充：0；
}
.导航栏.导航项目a{
字号：18px；
颜色：#080808；
填充顶部：12px；
垫底：12px；
右边填充：40px；
字体大小：400；
字体系列：“Roboto”；
背景色：无；
边框底部：1px实心rgba（193,0.59）；
}
.导航栏.导航项目.导航链接{
边框底部：无；
}

您在移动设备上没有鼠标悬停，因此单击无法打开子菜单并导航到所需部分。这并不理想，所以引导程序是这样工作的

一种解决方案是从

标签中删除

数据切换=“dropdown”

，但是该下拉列表在移动设备中不起作用，因为它需要单击事件

如果您想维护移动工作的子菜单，最好不要在移动设备上使用定位导航。因此，保留

data toggle=“dropdown”

并添加以下代码：

$("#navbarDropdown1").click(function() {
  if ($(window).width() > 991) {
    var href = $(this).attr('href');
    $('body, html').animate({ // an animation if you prefer, slim jQuery doesn't include animate
      scrollTop: $(href).offset().top
    }, 600);
  }
});

---

现在，当点击“关于我们”时，它将导航到该部分，但如果屏幕宽度小于为移动设备保留的引导断点（991px），则不会导航到该部分。

请编辑您的帖子，以包含任何相关的CSS和Javascript。