Wordpress主题交流群:565616228 进群记得看公告!

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

文章目录
  1. jQuery脚本代码
  2. 原理分析

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

jQuery脚本代码

  1. <script>
  2. // 子菜单父级三角箭头
  3. $(function() {
  4.     $('.header-menu-nav').find('.sub-menu').siblings('a').addClass('triangle');
  5. });
  6. <script>

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

  1. <nav>
  2.     <ul class="header-menu-nav">
  3.         <li><a href="#">导航菜单1</a></li>
  4.         <li><a href="#">导航菜单2</a>
  5.             <ul class="sub-menu">
  6.                 <li><a href="#">二级菜单1/a></li>
  7.                 <li><a href="#">二级菜单1</a></li>
  8.             </ul>
  9.         </li>
  10.     </ul>
  11. </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伪类元素进行显示下拉三角。

下面分享一下我用的css

  1. .triangle:after {font-family:'FontAwesome';content:"\f0dd";display:inline-block;color:#fff;float:none;position:relative;top:-3px;left:4px;}

代码非常精简,只要你的网站加载了jQuery库就可以正常使用,非常方便!

来源:本文由晨星博客原创撰写,欢迎分享本文,转载请保留出处和链接!
评论广告

3条评论

  • 出尘子  回复

    博主的这种方法确实简单,逻辑也比较清晰,我看到Wordpress其实给二级菜单的父级分配的有一个css选择器的,其实不用js也可以使用after伪类来实现这个。

  • xyz  回复

    默默的学习一下

  • 鱼昆鹏博客  回复

    然而我现在正想把主题的这个东西去掉,感觉和导航栏的自定义图标在一起会影响美观的说。

昵称*

邮箱*

网址