用jQuery为二级菜单的父级添加下拉三角

小牛爱奋斗 | 2016/1/31 8:35

文章目录

jQuery脚本代码
原理分析

给二级导航菜单添加下拉三角这个功能非常实用，可以让用户快速知道那个菜单下面有小分类，站在用户体验的方面考虑这也算一个小小的优化项目呀（夸张的说法），其实实现这个功能并不难实现的方法也很多，今天给大家分享的中方法是用jQuery实现的非常简单。

jQuery脚本代码

<script>
// 子菜单父级三角箭头
$(function() {
$(‘.header-menu-nav’).find(‘.sub-menu’).siblings(‘a’).addClass(‘triangle’);
});
<script>

只看jQuery脚本代码可能大家还不知道怎么用，我把我的html代码也贴出来给大家参考一下：

<nav>
<ul class=“header-menu-nav”>
<li><a href=“#”>导航菜单1</a></li>
<li><a href=“#”>导航菜单2</a>
<ul class=“sub-menu”>
<li><a href=“#”>二级菜单1/a></li>
<li><a href=“#”>二级菜单1</a></li>
</ul>
</li>
</ul>
</nav>

使用方法：

只需对着上面的代码修改.header-menu-nav导航外置包裹的css选择器和.sub-menu二级菜单的外置包裹css选择器即可。

原理分析

PS.分享代码要督促自己养成一个好习惯，一定要把代码的运行原理写清楚，方便大家学习使用，当然也是希望大家活学活用。

上面这段jQuery脚本在执行时会先定位导航菜单所在的盒子模型也就是.header-menu-nav，然后再这个盒子模型中定位出二级菜单.sub-menu如果.header-menu-nav下面有.sub-menu这个节点那么就向上返回以及找到a标签并给a标签添加一个class="triangle"的css选择器，有了这个再配合css的after伪类元素进行显示下拉三角。