頁面導航下拉欄思路
阿新 • • 發佈:2018-12-13
簡單佈局:
<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思路:
- 滑鼠mouseover到父級元素li.downList
- 獲取父元素下標,找到對應下標下拉框顯示
var index = $(".downList").index($(this));
$(".downListCon").eq(index).show(); - 滑鼠mouseleave(移出)downList
- 子元素隱藏
$(this).find(".downListCon").hide();