SharePoint 2013中Bootstrap导航栏点击链接后关闭重置问题求助

Hey Tonya, sorry you’ve spent 20 hours wrestling with this Bootstrap nav issue in SharePoint 2013—let’s break this down and fix it step by step!

问题根源 #

Bootstrap 3的下拉菜单默认会在点击菜单内的链接时关闭，因为它的JavaScript监听了点击事件并触发下拉隐藏逻辑。如果你的链接是指向当前页面的锚点，还会导致页面刷新，直接重置整个导航状态。

解决方案步骤 #

1. 阻止下拉菜单因点击链接而关闭 #

给导航内的链接添加点击事件，阻止事件冒泡到父级的下拉触发器，这样Bootstrap就不会触发关闭下拉的逻辑：

// 针对导航栏内的链接，阻止点击关闭下拉菜单
$('#menuba a').click(function(e) {
  // 只处理下拉菜单内的普通链接（排除下拉触发按钮）
  if ($(this).closest('.dropdown-menu').length && !$(this).hasClass('dropdown-toggle')) {
    e.stopPropagation(); // 阻止事件冒泡到父级下拉组件
  }
});

2. 解决页面重置（刷新）问题 #

如果你的导航链接是页面内部锚点（比如#section1），默认点击会触发页面刷新，导致导航重置。可以用JS阻止默认跳转，改为平滑滚动：

// 处理内部锚点链接，避免页面刷新
$('#menuba a[href^="#"]').click(function(e) {
  e.preventDefault(); // 阻止默认的锚点跳转行为
  const target = $(this).attr('href');
  
  // 可选：平滑滚动到目标位置
  $('html, body').animate({
    scrollTop: $(target).offset().top
  }, 500);
  
  // 同时阻止下拉菜单关闭（如果需要）
  e.stopPropagation();
});

3. 多级分层菜单的额外处理 #

如果你的导航是多级下拉（下拉菜单里还有子菜单），Bootstrap 3原生不支持这种结构，需要补充CSS和JS来实现：

首先添加多级菜单的CSS：

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.dropdown-submenu > a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}

然后添加JS控制子菜单展开：

// 处理多级下拉菜单的点击展开/收起
$('.dropdown-submenu a.dropdown-toggle').on("click", function(e) {
  $(this).next('ul').toggle(); // 切换子菜单显示状态
  e.stopPropagation(); // 阻止事件冒泡到父级
  e.preventDefault(); // 阻止默认链接跳转
});

最后测试建议 #

• 先测试基础的链接点击是否还会关闭下拉菜单
• 再测试内部锚点是否还会导致页面重置
• 多级菜单的话，检查子菜单是否能正常展开/收起，且点击子链接时不会关闭父菜单

希望这些步骤能帮你解决问题！你已经花了这么多时间，肯定很快能搞定的 😊

内容的提问来源于stack exchange，提问作者Tonya Reznor