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/

JQuery滑块功能不起作用

2 个答案: