Question

共同平滑滚动脚本，停止默认链接操作（通过返回false）以防止动画跳转。这也会在单击链接时停止引导导航栏菜单折叠（错误）。

示例：
http://www.bootply.com/NoGAvuQGDE

在平滑滚动脚本的最后一行;

如果您返回false，则会在点击链接时发生冲突并停止关闭菜单。
如果您返回true，由于链接正常，动画会变得很快。

重现：

点击dropdown / action链接
由于默认操作被阻止，下拉列表保持打开（不良）

从平滑滚动中排除导航栏链接会超出目的。

观
我们可以修改平滑滚动脚本，以便在链接平滑滚动时关闭所有导航栏菜单。像$('.dropdown-toggle').dropdown('collapse')这样的东西可行，但没有“崩溃”。 API中的操作，只有＆＃39;切换＆＃39;。

问：如何在引导页面上进行平滑滚动，不与导航栏菜单冲突，将它们关闭？

smoothscroll脚本，供将来参考：

$(function(){
    $('.navbar a[href*=#], a.smooth').click(function() {return smoothScroll(this)});
});

function smoothScroll(linkItem) {

    if (location.pathname.replace(/^\//,'') == linkItem.pathname.replace(/^\//,'')
    && location.hostname == linkItem.hostname) {

        var $target = $(linkItem.hash);
        $target = $target.length && $target || $('[name=' + linkItem.hash.slice(1) +']');

        if ($target.length) {
        var targetOffset = $target.offset().top;
        $('html,body').animate({scrollTop: targetOffset}, 500);
        return false;
        }
    }
}

Answer 1

在切换下拉菜单时查看文档树，Bootstrap功能似乎依赖于父级的open类。在有关事件处理程序的相关代码中（读取有点模糊），此类被切换。当在活动的菜单上阻止默认行为并且似乎正在执行此操作时，以下将模拟它：

dropdown = linkItem.closest('.dropdown');

if ($(dropdown).hasClass('open')) $(dropdown).removeClass('open');

有人可能会说，只有当下拉列表打开时，链接才可以点击，所以即使这样就足够了：

$(dropdown).toggleClass('open');

下拉里面的另一个需要一些额外的脚本，但我想这是一个不太可能的配置。与任何兄弟姐妹的互动显然也很有效。集成在代码中：

$(function(){ $('.navbar a[href*=#]').click(function() {return smoothScroll(this)}); }); function smoothScroll(linkItem) { if (location.pathname.replace(/^\//,'') == linkItem.pathname.replace(/^\//,'') && location.hostname == linkItem.hostname) { var $target = $(linkItem.hash); $target = $target.length && $target || $('[name=' + linkItem.hash.slice(1) +']'); var dropdown = linkItem.closest('.dropdown'); if ($target.length) { if (dropdown) $(dropdown).toggleClass('open'); var targetOffset = $target.offset().top; $('html,body').animate({scrollTop: targetOffset}, 500); return false; } } }

当仅在锚链接上使用此脚本时，可以通过以下方式简化：

$(function(){ $('.navbar a[href*=#]').click(function() {smoothScroll(this)}); }); function smoothScroll(linkItem) { var $target = $(linkItem.hash), dropdown = linkItem.closest('.dropdown'); if ($target.length) { if (dropdown) $(dropdown).toggleClass('open'); var targetOffset = $target.offset().top; $('html,body').animate({scrollTop: targetOffset}, 500); return false; } }

虽然通过前面的评论中发布的内容获得了预期的结果，但在进行额外的调试之后，代码需要更加微妙才能找到正确的父级 - 还添加了额外的if (dropdown)检查。当然不需要对不存在的东西应用方法。

http://www.bootply.com/hC4s6OEgA1

Answer 2

实现此目的的一种方法是在需要平滑滚动的导航菜单项中添加一个额外的类，这将使您不想滚动的其他菜单项按预期工作。

您更新的导航菜单HTML

<ul class="nav navbar-nav">
  <li class="smooth"><a href="#a">About</a></li>
  <li class="smooth"><a href="#b">Contact</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="http://www.google.com" target="_blank">Action</a></li>
    </ul>
  </li>
</ul>

和你更新的JQuery：

$(function(){
    $('.navbar .smooth a[href*=#], a.smooth').click(function() {return smoothScroll(this)});
});

如果你想看到它有效，我有added a JS.Fiddle。希望有所帮助。

使用粘性导航栏

2 个答案: