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实现导航栏切换、下划线移入移出

猜你喜欢