django学习入门系列之第七点《案例菜单的切换》

铁匠匠匠

于 2024-08-05 00:11:50 发布

阅读量708

点赞数 16

分类专栏： django 文章标签： django 学习 python 前端框架前端笔记经验分享

本文链接：https://blog.csdn.net/qq_62548908/article/details/140908820

版权

django 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

文章目录

案例菜单的切换
往期回顾

案例菜单的切换

小知识点：

onclick ---------------绑定事件

.removeClass()-------------删除样式

.hasClass()-------------查看有没有该样式

.addClass()-------------添加样式

cursor: pointer;-------------鼠标放上去变成小手的模样

eg:折叠菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .menus {
            height: 2000px;
            width: 200px;
            border: 1px solid red;
        }

        .menus .header {
            background-color: gold;
            padding: 10px 5px;

            /*鼠标放上去变成小手的模样*/
            cursor: pointer;
        }

        .menus .item .content a {
            display: block;
            padding: 10px 5px;
            border-bottom: 1px solid green;
        }

        .hide {
            display: none;
        }

    </style>

</head>
<body>

<div class="menus">
    <div class="item">
        <div class="header" onclick="clickME(this);">上海</div>
        <div class="content hide">
            <a>宝山区</a>
            <a>青浦区</a>
            <a>浦东新区</a>
            <a>普陀区</a>
        </div>
    </div>


    <div class="item">
        <div class="header" onclick="clickME(this);">北京</div>
        <div class="content hide">
            <a>海淀区</a>
            <a>朝阳区</a>
            <a>昌平区</a>
            <a>大兴区</a>
        </div>
    </div>
</div>


<script src="/static/js/js.js"></script>
<script type="text/javascript">
    function clickME(self) {
        // $(self) -> 当前点击的标签
        // $(self).next() ->找到下一个标签
        // $(self).next() ->找到下一个标签
        // $(self).next().removeClass("hide") 删除样式

        var hidehas = $(self).next().hasClass("hide");
        if (hidehas) {
            $(self).next().removeClass("hide");
        } else {
            $(self).next().addClass("hide");
        }

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

往期回顾

1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1：用户注册】
7.【案例2：用户注册改进】
8.【快速了解 CSS】
9.【常用选择器概念讲解】
10.【CSS基础样式介绍1】
11.【CSS基础样式介绍2】
12.【CSS基础样式介绍3】
13.【CSS基础样式介绍3】
14.【案例小米商城头标】
15.【案例小米商城头标总结】
16.【案例小米商城二级菜单】
17.【案例商品推荐部分】
18.【伪类简单了解】
19.【position】
20.【案例小米商城中app图标代码】
21.【边框及总结】
22.【BootSrap初了解】
23.【BootSrap的目录栏】
24.【BootSrap的栅格系统】
25.【案例博客案例】
26.【案例登录】
27.【案例后台管理样例】
28.【图标】
29.【BootStrap依赖】
30.【javascript初了解】
31.【jJavaScript的变量】
32.【JavaScript的字符串类型】
33.【JavaScript的数组介绍】
34.【案例动态数据】
35.【javascript 对象（字典）】
36.【案例动态表格】
37.【Javascript的条件语句和函数】
38.【DOM初了解】
39.【DOM的事件了解】
40.【jQuery初了解】
41.【jQuery寻找标签】
42.【jQuery寻找标签2】
43.【jQuery寻找标签(间接寻找)】

铁匠匠匠

关注

16
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
django学习入门系列之第七点《案例菜单的切换》

/ $(self).next().removeClass("hide") 删除样式。// $(self).next() ->找到下一个标签。// $(self).next() ->找到下一个标签。// $(self) -> 当前点击的标签。/*鼠标放上去变成小手的模样*/
复制链接

扫一扫