1. 程式人生 > >頁面導航下拉欄思路

頁面導航下拉欄思路

簡單佈局:

<li class="floatL downList navlist">
            <a href="javascript:;" class="navtxt">專案案例</a>
            <div class="downListCon" style="width: 220px;display: none;">
                <div class="listDown">
                    <ul class="onelist">
                        <li
>
<a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href
="">
5</a></li> </ul> </div> </div> </li>

js思路:

  1. 滑鼠mouseover到父級元素li.downList
  2. 獲取父元素下標,找到對應下標下拉框顯示
    var index = $(".downList").index($(this));
    $(".downListCon").eq(index).show();
  3. 滑鼠mouseleave(移出)downList
  4. 子元素隱藏
    $(this).find(".downListCon").hide();