jquery实现导航栏切换下划线移入移出
Posted mfbzr
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery实现导航栏切换下划线移入移出相关的知识，希望对你有一定的参考价值。
这里下划线显示使用的是伪类，用hover属性触发伪类，使其显示下划线
代码如下：
width: 0; border-bottom: 2px solid blue; -webkit-transition: width 0.5s ease-in-out; -moz-transition: width 0.5s ease-in-out; -ms-transition: width 0.5s ease-in-out; -o-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out; /* 动画 */
hover触发伪类：
.navContent>p:hover::before{ /* hover触发伪类 */
width: 30px; /* 下划线最长长度 */
}
完整代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <ul class="nav"> <li class="navContent"> <p>水果</p> <div> <p>苹果</p> <p>香蕉</p> </div> </li> <li class="navContent"> <p>蔬菜</p> <div> <p>白菜</p> <p>菠菜</p> </div> </li> <li class="navContent"> <p>肉食</p> <div> <p>猪肉</p> <p>鸡肉</p> </div> </li> </ul> </body> </html> <script> $(‘.navContent‘).on(‘mouseenter‘,function(){ $(this).siblings().find(‘div‘).css({‘display‘:‘none‘}); }); $(‘.navContent>p‘).on(‘mouseenter‘,function(){ $(this).siblings().slideDown(); $(this).siblings().css({‘display‘:‘block‘}); }); $(‘ul‘).on(‘mouseleave‘,function(){ $(‘.navContent div‘).css({‘display‘:‘none‘}); }); $(‘.navContent div p‘).on(‘click‘,function(){ /* 添加点击事件 */ console.log($(this).text()); }); </script> <style> ul,li{ list-style-type: none; } .nav{ display: flex; flex-direction: row; } .navContent{ width: 100px; margin-right: 30px; position: relative; text-align: center; } .navContent>p::before{ /* 伪类 css2用: css3用:: */ content: ‘‘; /* 伪类元素需要加content属性 */ position: absolute; bottom: 0; width: 0; border-bottom: 2px solid blue; -webkit-transition: width 0.5s ease-in-out; -moz-transition: width 0.5s ease-in-out; -ms-transition: width 0.5s ease-in-out; -o-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out; } .navContent>p:hover::before{ /* hover触发伪类 */ width: 30px; /* 下划线最长长度 */ } .navContent>div{ position: absolute; /* 定位一定要注意 */ display: none; background-color: #F9F9F9; width:100px; } .navContent div p:hover{ color: #3ec56c; } </style>
如果遇到下拉菜单无法显示的问题，请首先检查外层div是否设置了
overflow:hidden；
我就是因为这个疑惑了很久，这里标注出来，希望大家不要想我一样踩这个纯属浪费时间的坑（我也很无奈啊）。
以上是关于jquery实现导航栏切换下划线移入移出的主要内容，如果未能解决你的问题，请参考以下文章
js(jquery)鼠标移入移出事件时，出现闪烁隐藏显示隐藏显示不停切换的情况