阻止在单击固定顶部菜单后导航到页面顶部

Prevent navigation to the top of the page after click on fixed top menu

本文关键字：顶部 导航 菜单 单击      更新时间：2023-09-26

我最近一直在做一个新项目，并使用了固定的顶部菜单。在顶部导航菜单中，我有未编号的内联列表。我有一个可点击的元素，在 click（） 之后它显示了div 内的垂直选项。

我

不确定这是否只是我做的 css 错误，或者我需要添加一些东西来使其工作，但每次我单击这个 <li> 元素时，它都会将我导航到页面顶部，然后显示div 的内容。

它至少可以工作，但我希望用户对网站上的功能感到满意，所以我不希望 click（） 函数将我导航到页面顶部，而只是显示导航栏中的固定<div>与我的固定导航栏对齐。感谢您的帮助。

**

编辑：**我忘了说，在 <div> show（） 函数之后，我可以轻松地在网站上显示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);
        }
   });
});

取消单击，以便不会执行默认操作（跟随链接）。

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

对事件使用 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();
});
相关文章：