鏈接#anchors在導航欄不關閉點擊後

我以前解決在我的導航欄鏈接沒有崩潰的問題被點擊後並感謝@Kami我有這個工作使用下面的代碼鏈接#anchors在導航欄不關閉點擊後

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

從Bootstrap 3 after navbar collapse, toggle wont reopen nav

但是當我在下面添加這個很好的功能來保持導航欄不會重疊的內容打破。

這個函數的哪個部分導致上述情況中斷，以及如何實現這兩個？

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; 
    } 
} 


});

使用@Shouvik建議從offsetting an html anchor to adjust for fixed header 我改變了一行代碼，只查找以#JDG開始是沒有這個鏈接錨我的模態窗口打破了錨。你可以看到發生了什麼here我的服務菜單項被點擊後不會關閉。函數放置在bootstrap.min.js文件的末尾

來源

2014-10-16 Torads

賈斯珀指出了爲什麼這些不在一起工作的問題。

我不得不從兩者的功能刪除

return false;

。

來源

2014-10-17 13:43:52 Torads

您實際上沒有告訴您的腳本關閉菜單。爲了做到這一點，添加以下行您function scrollToAnchor()函數中：

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

編輯：有再看看劇本，上面的行應放在以下行，而不是function scrollToAnchor()功能，即內部。當您點擊菜單項時，它必須適用：

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

來源

2014-10-16 17:29:21 webeno

添加了該行，但沒有運氣。嘗試使用FF和Chrome。也嘗試從「隱藏」更改爲「切換」，因爲當我最初使用隱藏時，任何第二次嘗試打開下拉菜單都不起作用。我把它放置正確嗎？ – Torads 2014-10-16 17:56:21

您實際上並沒有[** transitions plugin **]（http://getbootstrap.com/javascript/#transitions）包含，如[**關於collapse **的bootstrap文檔]（http：/ /getbootstrap.com/javascript/#collapse）... – webeno 2014-10-16 19:29:35

此外，您已經有了一個自定義腳本，爲什麼不使用它而不是將自定義代碼添加到標準腳本中？ – webeno 2014-10-16 19:31:03

鏈接#anchors在導航欄不關閉點擊後

回答

相關問題