jQuery案例：复合菜单导航

最新推荐文章于 2024-07-12 16:55:56 发布

你的玄烨

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量214

点赞数

分类专栏： jQuery 文章标签： jquery 前端

本文链接：https://blog.csdn.net/CCQStudy/article/details/106729665

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言：我使用的是jQuery版本是jquery-1.11.3.js

寄语：没有太多的代码，也没有太复杂的逻辑。只是想用简单的案例熟悉jQuery的使用。

案例逻辑思想：给有二级菜单项的li通过添加一个事先设置好样式的类名，添加一个右箭头风格图标，并给当前的li绑定点击事件，判断事件源li如果有子元素的话，就显示出来，同样给事件源li添加一个事先设置好样式的类名，添加一个下箭头风格图标。

API先知：
① slideToggle( ) 方法通过使用滑动效果（高度变化）来切换元素的可见状态。
如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。
示例：通过使用滑动效果，在显示和隐藏状态之间切换

元素，点一次段落隐匿，再点，段落出现。

 $(document).ready(function () {
            $(".btn1").click(function () {
                $("p").slideToggle();
            });
        });

    <p>This is a paragraph.</p>
    <button class="btn1">Toggle</button>

② toggleClass( ) 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

$(document).ready(function () {
            $("button").click(function () {
                $("p").toggleClass("main");
            });
        });

页面代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq复合导航菜单</title>
</head>
<style type="text/css">
    ul li {
        list-style: none;
    }
    li ul {
        display: none;
    }
    .right {
        list-style-image: url(img/right.png);
    }
    .down {
        list-style-image: url(img/down.png);
    }
</style>
<body>
    <ul>
        <li>
            主题市场
            <ul>
                <li>
                    运动派
                    <ul>
                        <li>三级菜单a</li>
                        <li>三级菜单b</li>
                        <li>三级菜单c</li>
                        <li>三级菜单d</li>
                    </ul>
                </li>
                <li>
                    有车族
                    <ul>
                        <li>
                            三级
                            <ul>
                                <li>四级</li>
                                <li>四级</li>
                                <li>四级</li>
                            </ul>
                        </li>
                        <li>三级</li>
                        <li>三级</li>
                        <li>三级</li>
                    </ul>
                </li>
                <li>生活家</li>
            </ul>
        </li>
        <li>
            特色购物
            <ul>
                <li>淘宝二手</li>
                <li>拍卖会</li>
                <li>爱逛街</li>
                <li>全球购</li>
                <li>淘女郎</li>
            </ul>
        </li>
        <li>
            优惠促销
            <ul>
                <li>天天特价</li>
                <li>免费试用</li>
                <li>清仓</li>
                <li>1元起拍</li>
            </ul>
        </li>
        <li>工具</li>
    </ul>
    <script src="js/jquery-1.11.3.js"></script>  
</body>
</html>

逻辑代码：■◆■◆■◆■

<script>
        //文档加载完成事件
        $(function () {
            //给有ul的li加下图标（添加类名）
            $("li:has(ul)")
                //class设置样式list-style-image
                .addClass("right")
                //添加点击事件
                .click(function (e) {
                    //判断直接点的那个li（事件源）有没有子元素
                    if ($(e.target).children().length) {
                        $(this).children().slideToggle();
                        $(this).toggleClass("down");
                    }
                    //阻止事件冒泡，只让当前事件源这一层影响
                    e.stopPropagation();
                })
        }) 
    </script>

运行效果：

在这里插入图片描述

你的玄烨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery案例：复合菜单导航

前言：我使用的是jQuery版本是jquery-1.11.3.js寄语：没有太多的代码，也没有太复杂的逻辑。只是想用简单的案例熟悉使用jQuery的应用。案例逻辑思想：给有二级菜单项的li通过添加一个事先设置好样式的类名，添加一个右箭头风格图标，并给当前的li绑定点击事件，判断事件源li如果有子元素的话，就显示出来，同样给事件源li添加一个事先设置好样式的类名，添加一个下箭头风格图标。API先知：① slideToggle( ) 方法通过使用滑动效果（高度变化）来切换元素的可见状态。如果被选元素
复制链接

扫一扫