如何防止BootStrap Drop-down中URL末尾的＃？

Question

我有這個鏈接：

<a href="#" id="myBtn"><i class="icon-user"></i><span>Add user</span></a>

我使用preventDefault()並return false以避免地址末尾的# 。 而且效果很好。 問題是當我對Bootstrap的下拉列表做同樣的事情時。 如果我將return返回false，則不會按預期添加# ，但它也會阻止下拉消失，就像我刪除return false 。 這是我的下拉代碼：

<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="ddBtn">
    <i class="icon-wrench"></i><span>Parent Item<b class="caret"></b></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#" id="ddSonBtn">Child item</a></li>

使用Javascript：

$("#ddSonBtn").click(function () {
    //some code

    e.preventDefault();
});

這有解決方案嗎？

我在用

Bootstrap 2
jQuery

謝謝。

Answer 1

它可能有也可能沒有很好的文檔記錄，但是沒有必要同時preventDefault() 並 return false; 在jQuery事件中。

編輯 ：從jQuery的on文檔：“從事件處理程序返回false將自動調用event.stopPropagation()和event.preventDefault() ”（ http://api.jquery.com/on/#event-handler ）

return false; 相當於e.preventDefault(); 和e.stopPropagation();

preventDefault阻止元素的默認行為 - 例如提交表單的提交按鈕，導航到特定href的錨點等。

stopPropagation阻止事件冒泡DOM。 意思是，不會在目標元素的父元素上觸發事件。

選擇使用事件時所需的選項。 在您的情況下，您可能只需要在Dropdown的單擊處理程序中調用preventDefault 。

此外，在您的代碼中，在函數范圍內使用return是最后一行執行。 運行該函數后， 不會執行其后的任何代碼。

Answer 2

根據Bootstrap文檔：

http://getbootstrap.com/javascript/#dropdowns

有必要用data-target屬性替換href ，即

<a data-target="#" id="myBtn"><i class="icon-user"></i><span>Add user</span></a>

我認為這是做事的更“自助”的方式，而不是壓制事件處理程序或手動操作顯示/隱藏行為。

Answer 3

只需從href屬性中刪除#值即可。 將href留空是有效的HTML。

<a href="" id="myBtn"><i class="icon-user"></i><span>Add user</span></a>

Answer 4

用於Bootstrap + jQuery：

$(this).parent().parent().parent().removeClass("open")

Answer 5

我有同樣的問題，經過多次搜索意識到這是我自己的錯誤。 我有一個錯誤的鏈接到bootstrap js文件（完整性哈希不正確），因此沒有加載。 這導致下拉列表無法在某些頁面上運行。

Answer 6

我嘗試過這種方式並且有效。 示例（咖啡腳本）是這樣的;

jQuery ->
  $('.your_mark ul.dropdown-menu li').click ->
    # Do what you want
    $(this.parentElement.parentElement).removeClass('open')
    return false

1. 通過從btn-group div中刪除css類'open'來手動關閉下拉菜單。
2. 返回false以避免在您的網址中包含＃。