點擊固定頂部菜單後，防止導航到頁面頂部

我最近一直在研究一個新項目，並使用固定的頂級菜單。在頂部的導航菜單中，我有和無編號的行內列表。我有一個可點擊的元素，點擊（）後，它顯示了div內的垂直選項。點擊固定頂部菜單後，防止導航到頁面頂部

我不確定是否只是我做的css錯誤，或者我需要添加一些內容來完成這項工作，但每次點擊此<li>元素時，它都會導航到頁面的頂部，然後顯示div的內容。

它至少工作，但我希望用戶對網站上的功能感到滿意，所以我不希望click（）函數將我導航到頁面的頂部，但只是爲了顯示固定的<div>從與我的固定導航欄對齊的導航欄。感謝幫助。

**編輯：**我忘記說，<div>顯示（）函數後，我可以輕鬆地移動與顯示div在網站上，它是固定的，它應該是，但再次當我點擊它摺疊它，click（）函數將我導航到頂部。

下面的代碼：

HTML：

<li class="navbar_item navbar_item_left navbar_item_actions" onclick="> 
       <a class="navbar_item_link navbar_item_link_for_actions refresher" href="#">Click me!</a> 
       <div class="actions-dropdown"> 
        <a href="#">First link</a> 
        <a href="#">Second link</a> 
        <a href="#">Third link</a> 
       </div> 
</li>

CSS：

.actions-dropdown {display: none; position: fixed; background-color: rgba(154, 210, 78, 1); width: 250px;} 
.actions-dropdown a {color: rgb(250, 250, 250); padding: 8px; font-size: 15px; text-decoration: none; display: block; text-align: left; float: left; width: 234px;}

JS：

$(document).ready(function(){ 
    $(".navbar_item_actions").click(function(){ 
     var display = $(".actions-dropdown").css('display'); 
     if(display == 'none'){ 
      $(".actions-dropdown").show(400); 
     } else { 
      $(".actions-dropdown").hide(400); 
     } 
    }); 
});

來源

2016-02-25 Dawid Zbiński

取消點擊這樣的默認操作（以下鏈接）不會執行。

$(".navbar_item_actions").click(function(e){ 
    e.preventDefault(); 
    /* rest of code */ 
});

來源

2016-02-25 16:24:30 epascarello

現在我意識到我忘了添加那一個。我想知道什麼是錯的。感謝幫助！ –

在事件上使用preventDefault。

$(".navbar_item_actions").click(function(event){ 
    var display = $(".actions-dropdown").css('display'); 
    if(display == 'none'){ 
     $(".actions-dropdown").show(400); 
    } else { 
     $(".actions-dropdown").hide(400); 
    } 
    event.preventDefault(); 
});

來源

2016-02-25 16:24:46

謝謝你的幫助克里斯。我剛剛意識到我忘了添加preventDefault（）。否則，謝謝。 –

我認爲最好的做法是放置event.preventDefault（）;在@epascarello完成之後，首先在函數打開後進行。 –

點擊固定頂部菜單後，防止導航到頁面頂部

回答

相關問題