0

私は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");
    });
});

ドキュメントの head 内で、最新の JQuery ライブラリを参照します

4

2 に答える 2

0

これらの微調整を試してみてください (最初から開始し、アンカー タグの起動を停止します)。

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

        $("#sub_navigation").slideDown("slow");
        event.preventDefault();
    });
});
于 2013-03-28T15:23:20.857 に答える
0

これを 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/

于 2013-03-28T15:26:50.357 に答える