码迷,mamicode.com
首页 > Web开发 > 详细

jquery实现导航栏切换、下划线移入移出

时间:2020-05-18 18:24:59      阅读:68      评论:0      收藏:0      [点我收藏+]

标签:长度   list   console   over   use   dir   before   ase   动画   

 

这里下划线显示使用的是伪类,用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实现导航栏切换、下划线移入移出

标签:长度   list   console   over   use   dir   before   ase   动画   

原文地址:https://www.cnblogs.com/mfbzr/p/12912058.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!