Question

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

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

它至少有用，但我希望用户对网站上的功能感到满意，所以我不希望click（）函数将我导航到页面顶部，只是为了显示固定的{{ 1}}来自与我的固定导航栏对齐的导航栏。谢谢你的帮助。

**编辑：**我忘了说在<div> show（）函数之后我可以轻松地移动到网站上显示的div并且它固定在应该的位置，但是当我点击它时再一次在它上面折叠它，click（）函数导航我到顶部。

以下是代码：

HTML：

<div>

CSS：

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

JS：

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

Answer 1

取消点击，这样就不会执行默认操作（链接后面）。

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

Answer 2

对事件使用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();
});

点击固定的顶级菜单

2 个答案: