导航栏中#anchors 的链接在单击后未关闭

Question

我之前已经解决了我的导航栏链接在单击后没有崩溃的问题，感谢@Kami，我使用下面的代码完成了这项工作

$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') ) {
$(this).collapse('toggle');
}
});

来自 Bootstrap 3 导航栏折叠后，切换不会重新打开导航

但是当我在下面添加这个很好的功能以防止导航栏重叠内容时，它就崩溃了。

该函数的哪一部分导致了上述问题？我该如何实现这两个功能？

  function scrollToAnchor() {
if($(".jquery-anchor").length > 0 && document.URL.indexOf("#") >= 0){
var anchor = document.URL.split("#")[1];
$(".jquery-anchor").each(function() {
    if($(this).attr("name") == anchor) {
        $("html,body").animate({
                scrollTop: $(this).offset().top - 50},
            'slow');
        }           
    });

}

}

$(function() {
$("a[href*='#JDG']: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) {
    $('html,body').animate({
      scrollTop: target.offset().top - 30 //offsets for fixed header
    }, 1000);
    return false;
  }
 }
 });

 //Executed on page load with URL containing an anchor tag.
 if($(location.href.split("#")[1])) {
  var target = $('#'+location.href.split("#")[1]);
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top - 30 //offset height of header here too.
    }, 1000);
    return false;
  }
}


});

使用来自偏移 html 锚点的 @Shouvik 建议来调整固定标题 我更改了一行代码，只查找以 #JDG 开头的锚点，因为如果没有此链接到我的模态窗口的锚点，就会损坏。 您可以在here看到发生了什么，我的服务菜单项在单击后不会关闭。这些函数位于 bootstrap.min.js 文件的末尾

Answer 1

您实际上并没有告诉脚本关闭菜单。为此，请在

function scrollToAnchor()

函数中添加以下行：

$('.navbar-collapse.in').collapse('hide');

编辑：再看一下脚本，上面的行应该放在下面的行内，而不是

function scrollToAnchor()

函数，即。当您单击菜单项时它必须应用：

$("a[href*='#JDG']:not([href='#'])").click(function() {
    //...
    $('.navbar-collapse.in').collapse('hide');
});

Answer 2

Jasper 指出了为什么这些组合在一起时不起作用的问题。

我只需要删除

return false;

来自这两个功能。

Answer 3

我遇到了这个问题，我的切换无法关闭！ :(