树状菜单手风琴效果

最新推荐文章于 2022-12-19 09:48:48 发布

Allen·赵

最新推荐文章于 2022-12-19 09:48:48 发布

阅读量401

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/zqlbanzhuan/article/details/108936629

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

树状菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding:0;
    }

    ul,ol,li{
        list-style: none;
    }

    ul{
        width: 300px;
        border: 3px solid #000;
        margin: 30px auto;
        padding: 0 0 0 20px;
    }

    ul > li{
        cursor: pointer;
    }

    ul > li > ol{
        padding: 0 0 0 20px;
        display: none;
    } 

    ul > li::before{
        content: "+";
    }

    ul > li.active:before{
        content: "-";
    }
</style>
</head>
<body>
<ul>
    <li>
        一级菜单
        <ol>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ol>
    </li>
    <li>
        一级菜单
        <ol>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ol>
    </li>
    <li>
        一级菜单
        <ol>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ol>
    </li>
    <li>
        一级菜单
        <ol>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ol>
    </li>
</ul>

<script src="./jquery.min.js"></script>
<script>
    // 思路步骤
    // 给 ul中子级li,添加点击事件
    // 点击时: 当前li中 ol,下拉显示
    //         其他li中 ol,上卷隐藏

    $('ul>li').click(function(){
        $(this).toggleClass('active').children('ol').slideToggle().parent().siblings().removeClass('active').children('ol').slideUp();
        
        /*
        $(this)                  当前的,点击的 li标签
        .toggleClass('active')   切换class属性值 , 如果没有,就添加 active , 显示为 - 减号
                                                  如果有,就删除 active , 显示为 + 加号
        .children('ol')     找当前 li 中的子级标签 ol  children()  /  find()
        .slideToggle()      下拉显示和上卷隐藏的切换
        完成了,当前li的操作,要做其他li的操作
        .parent()    当前操作是 ol,找到ol的父级,li,也就是当前点击的li    
        .siblings()  找到当前点击li的兄弟标签
        .removeClass('active')    删除 class中的active,让 -减号 变 +加号
        .children('ol')   找到子级ol
        .slideUp();       上卷隐藏
        
        */
    })

    /*
    总结
        操作当前点击li
            1,定义class中active属性值
                如果有,就删除,如果没有就添加 ---  +加号 / -减号 的切换
                也可以通过if判断等实现,但是比较麻烦
                toggleClass()
            2,定义子级ol标签的显示属性
                如果是隐藏,就是显示,如果是显示就隐藏
                slideToggle()

        操作其他li
            1,删除class中active属性值
                如果之前是显示状态, 把 -减号 变 +加号
                removeClass()
            2,定义子级ol标签的显示属性
                一律都是上卷隐藏
                如果之前是隐藏,就没有操作效果
                如果之前是显示,就会上卷隐藏
                slideUp()
    */
</script>
</body>
</html>

手风琴效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style> 
    *{
        margin: 0;
        padding: 0;
    }
    ul,ol,li{
        list-style: none;
    }

    ul{
        width: 720px;
        height: 280px;
        border: 3px solid #000;
        margin: 30px auto;
        display: flex;
    }

    ul>li{
        width: 180px;
        overflow: hidden;
    }

    ul>li>img{
        height: 100%;
        display: block;
    }
</style>
</head>
<body>
<ul>
    <li><img src="./images/01.jpg" alt=""></li>
    <li><img src="./images/02.jpg" alt=""></li>
    <li><img src="./images/03.jpg" alt=""></li>
    <li><img src="./images/04.jpg" alt=""></li>
</ul>
<script src="./jquery.min.js"></script>
<script>
    // 手风琴效果
    // 每个li中,图片默认只显示一部分
    // 当鼠标进过时,经过哪个图片,哪个图片就完全显示,其他图片就显示更小的一部分
    // 显示的图片,宽度变为520,其他图片宽度变为40

    $('ul>li').mouseover(function(){
        // 让当前li的宽度变为520
        // 让兄弟li的宽度变为60
        $(this).stop().animate({width:520,} , 1000).siblings().finish().animate({width:60} , 1000);
    })

    $('ul').mouseout(function(){
        // 让所有li的宽度,变为默认的 180
        $('ul>li').stop().animate( {width : 180} , 1000 );
    })

    // 总结:
    // 鼠标移入 li 标签
    //    让 当前的li 标签 宽度变大 , 其他兄弟li标签,宽度变小
    // 鼠标移出 整个ul 
    //    让 所有的 li标签, 宽度恢复原状


</script>
</body>
</html>

Allen·赵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
树状菜单手风琴效果

树状菜单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin
复制链接

扫一扫