jquery - JQuery滑块功能不起作用

Question

我是 JQuery 新手，遇到了一些问题。在单击我想看到的主导航后，我想让我的子导航栏滑动打开。但我似乎无法让它工作。

有人可以帮忙吗？

下面的代码：

HTML

<div id="navigation_bar">
    <ul>                        
        <li><a href="index.html">Home</a></li>                        
        <li><a href="">Beauty Treatments</a></li>                                                
        <li><a href="">Holistic Treatments</a></li>
        <li><a href="">Pamper Parties</a></li>
        <li><a href="">After care</a></li>
        <li><a href="">Gallery</a></li>
        <li><a href="">Testermonials</a></li>
        <li><a href="">Special offers</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</div>

<div id="sub_navigation">

</div>

CSS

#navigation_bar ul {
    line-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#navigation_bar li {
    float:left;
    margin-left:0;
    padding: 0;
}

#navigation_bar li a:link, #navigation_bar li a:visited {
    font-family:Arial, Helvetica, sans-serif;
    display:block;
    padding: 0 20px 0 20px;
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#222;
    font-weight:bold;
    text-decoration:none;
    line-height:36px;
    border:none;
}

#navigation_bar li a:hover, #navigation_bar li a:active {
    border:none;
    color:#ffffff;
    background-image:url(Images/mouse_over_background.gif);
}

#navigation_bar li a.current {
    background-image:url(Images/mouse_over_background.gif); 
    border:none;
    color:#0065b0;
}

#navigation_bar li a.current:hover {
    cursor:default;
    color:#0065b0;
}

#sub_navigation{
    background-image:url(Images/subnav_background.png);
    background-repeat:no-repeat;
    position:relative;
    margin-top:-15px;
    width:1140px;
    height:50px;
    z-index:1;
}

#subnav_text {
    font-family:arial;
    font-size:14px;
    line-height:25px;
    float:left;
    padding-left:15px;
    text-decoration:none;
}

jQuery

// JavaScript Document

$(document).ready(function(){
    $("#navigation_bar li").click(function(){
        $("#sub_navigation").slideDown("slow");
    });
});

在文档的开头，我引用了最新的 JQuery 库

Answer 1

尝试这些调整（从它开始，停止触发锚标签）。

$(document).ready(function () {
    $("#sub_navigation").slideUp();
    $("#navigation_bar li").click(function (event) {

        $("#sub_navigation").slideDown("slow");
        event.preventDefault();
    });
});

Answer 2

将此添加到您的 CSS 中：

#sub_navigation {
    display: none; //The slideDown effect depends on the element being hidden.
}

并在你的 JS 中改变它：

$(document).ready(function(){
    $("#navigation_bar li a").on('click', function(e){
        //We don't want the links to go elsewhere. 
        //Without this we wouldn't see the slide.
        e.preventDefault(); 
        $("#sub_navigation").slideDown("slow");
    });
});

这是一个供你玩的小提琴：http: //jsfiddle.net/vm6NB/

更新：

#sub_navigation {
    position: absolute;
    top: 120px;
}

新小提琴：http: //jsfiddle.net/vm6NB/4/