页面导航下拉栏思路

来源:互联网 发布:淘宝的3c证书编号 编辑:程序博客网 时间:2024/05/29 17:48

简单布局:

<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();
原创粉丝点击