之前寫導(dǎo)航欄都是為了方便，直接用的bootstrp里的類，這兩天在學(xué)習(xí)jQuery，所以想自己實(shí)現(xiàn)一個(gè)，廢話不多說(shuō)了，開始吧：

• 先寫html文件
  在HTML文件中先將dom節(jié)點(diǎn)建立起來(lái)：

<div class="nav">
    <ul class="list">
            <li><a href="#homePage.html">首頁(yè)</a></li>
            <li><a href="#first.html">第一頁(yè)</a></li>
            <li><a href="#second.html">第二頁(yè)</a></li>
            <li><a href="#third.html">第三頁(yè)</a></li>
            <li><a href="#forth.html">第四頁(yè)</a></li>
        </ul>
</div>

那么此時(shí)的頁(yè)面效果如下所示：

• 給剛創(chuàng)建的dom節(jié)點(diǎn)添加css
  主要就是將剛創(chuàng)建的dom節(jié)點(diǎn)顯示在同一行，并且當(dāng)我的將鼠標(biāo)放在a鏈接上時(shí)，讓它顯示的顏色改變

 * {
    margin: 0;
    padding: 0;
}
.nav {
    width: 100%;
    height: 40px;
    background-color: #222;
}
.list {
    width: 80%;
    height: 40px;
    margin: 0 auto;
    list-style-type: none;
}
.list li {
    float: left;
}
a {
    text-decoration: none;
}
.list li a {
    padding: 0 30px;
    color: #aaa;
    line-height: 40px;
    display: block;
}
.list li a:hover {
    background: #333;
    color: #fff;
}

此時(shí)的顯示效果如下：

• 添加下拉框節(jié)點(diǎn)
  我在每個(gè)li里面給它添加下拉框節(jié)點(diǎn)，例如：

 <li>
            <a href="#homePage.html">首頁(yè)</a>
            <div class="liList">
                <span>首頁(yè)</span>
                <span>首頁(yè)</span>
                <span>首頁(yè)</span>
                <span>首頁(yè)</span>
            </div>
 </li>

為了讓其美觀我們可以給它添加css使其和上面的導(dǎo)航樣式保持一致:

.liList {
    height: auto;
    margin: 0 auto;
    list-style-type: none;
    background-color: #333;
}
.liList span{
    color: #aaa;
    line-height: 25px;
    display: block;
    text-align: center;
    cursor: pointer;
}
.liList span:hover{
    background: #aaa;
    color: white;
}

那么此時(shí)的顯示效果如下：

這樣添加之后這些節(jié)點(diǎn)就會(huì)顯示，而我們的意圖是想讓它在等我們點(diǎn)擊某個(gè)導(dǎo)航的時(shí)候再顯示，所以我們此時(shí)就需要給它添加jQuery來(lái)控制讓它隱藏

• 隱藏下拉框信息
  對(duì)應(yīng)jQuery代碼如下：

$(".liList").hide();

此時(shí)它的頁(yè)面就和之前沒有區(qū)別了，我們已經(jīng)將它隱藏掉了，那么下一個(gè)動(dòng)作就是當(dāng)我點(diǎn)擊或者移到導(dǎo)航項(xiàng)的時(shí)候讓對(duì)應(yīng)的下拉框顯示，我這里用了鼠標(biāo)滑過事件

• 鼠標(biāo)滑過導(dǎo)航項(xiàng)，顯示其對(duì)應(yīng)下拉框
  對(duì)應(yīng)jQuery代碼如下：

$(".list > li > a").hover(function () {   
    $(this).addClass("current").siblings().show()
              .parent().siblings().children("a")
              .removeClass("current").next().hide();
});

首先給導(dǎo)航項(xiàng)加一個(gè)鼠標(biāo)滑過事件hover，然后給當(dāng)前點(diǎn)擊的元素設(shè)置一個(gè)class，因?yàn)槲乙o點(diǎn)擊過后的導(dǎo)航項(xiàng)添加一個(gè)顏色以顯示選中，然后使用siblings()獲取它的兄弟元素，并使用show()將它顯示，即顯示下拉框的內(nèi)容，但是此時(shí)的問題就是我每點(diǎn)一個(gè)之前點(diǎn)過的都會(huì)顯示，所以當(dāng)我點(diǎn)擊這個(gè)的時(shí)候我將其他的導(dǎo)航項(xiàng)的class都刪除，并且將其他項(xiàng)的下拉框隱藏，但是此時(shí)我點(diǎn)擊下拉框的內(nèi)容時(shí)，我的下拉框還存在，所以我接下來(lái)點(diǎn)擊下拉框內(nèi)容之后將下拉框隱藏

• 點(diǎn)擊下拉框內(nèi)容之后將下拉框隱藏
  剛開始的時(shí)候我是直接使用了class選擇器$(".liList > span")去獲取點(diǎn)擊的元素，但是因?yàn)樗请[藏元素，所以我無(wú)法獲取并給其添加事件，故我使用了可見性過濾選擇器，對(duì)應(yīng)jQuery代碼如下：

 $("span:hidden").click(function () {
      $(this).parent().hide();
    });

此時(shí)，我們的導(dǎo)航欄就完成啦！

源代碼地址：https://github.com/yangzhanmei/nav-demo