博客
关于我
JQuery 05 层次选择器的使用
阅读量:138 次
发布时间:2019-02-26

本文共 2013 字,大约阅读时间需要 6 分钟。

在这里插入图片描述

css()方法

该方法可以返回第一个匹配元素的CSS属性值。
其基本语法结构如下所示:
$(selector).css(name)
其中,参数name表示CSS属性的名称,该参数可包含任何CSS属性。

css()方法还可以为所有匹配元素设置指定的CSS属性
其基本语法结构如下所示:
$(selector).css(name,value)

案例:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>折叠菜单 —— 层次选择器的应用</title>    <style>        ul{    list-style:none;padding:0;margin:0}        div{    width:150px;border:1px solid #515E7B;margin:10px;}        div li{    background:#515E7B;border-bottom:1px solid #fff;}        div li a{    text-decoration:none;color:#fff;font-size:16px;height:40px;line-height:40px;padding-left:10px;}        div li a:hover{    text-decoration:underline;}        .wrap {    width:150px;display:none;}        .wrap li{    background: #fff;margin: 0;}        .wrap li a{    color:#3B475F;font-size:12px;}    </style>    <script src="js/jquery-3.3.1.min.js"></script>    <script type="text/javascript">        $(document).ready(function () {                $("#fold>ul>li:first").find('.wrap').css({    display:'block'});            $("#fold>ul>li").click(function () {                    $(this).siblings('li').find('.wrap').css({    display: 'none'});                $(this).find('.wrap').css({    display:'block'});            })        })    </script></head><body><div id="fold">    <ul>        <li>            <a href="#">信息管理</a>            <ul class="wrap">                <li><a href="#">未读信息</a></li>                <li><a href="#">已读信息</a></li>                <li><a href="#">信息列表</a></li>            </ul>        </li>        <li>            <a href="#">商品管理</a>            <ul class="wrap">                <li><a href="#">商品添加</a></li>                <li><a href="#">商品列表</a></li>                <li><a href="#">商品分类</a></li>            </ul>        </li>        <li>            <a href="#">用户管理</a>            <ul class="wrap">                <li><a href="#">权限设置</a></li>                <li><a href="#">用户列表</a></li>                <li><a href="#">重置密码</a></li>            </ul>        </li>    </ul></div></body></html>

在这里插入图片描述

转载地址:http://okok.baihongyu.com/

你可能感兴趣的文章
python命名空间更改_Python模块xml.etree.ElementTree自动修改xml命名空间键
查看>>
Python命名中尾随下划线有什么好处?
查看>>
Python启动脚本
查看>>
Python听写汇总结果
查看>>
python吊打Excel?屁!那是你不会用!
查看>>
Python合并两张图片 | 先叠透明度再合并 (附Demo)
查看>>
python各进制的表述与转换
查看>>
python各种库安装
查看>>
python可视化matplotlib_如何使用Python中最强大的可视化工具Matplotlib?
查看>>
python可维护性_使用这7大神器,让你的Python 代码更容易于维护
查看>>
python变量的详细教程_Python零基础入门教程之语法入门[变量](第二期)
查看>>
Python变量命名方法-ChatGPT4o作答
查看>>
Python变量与运算符
查看>>
python单元测试之unittest
查看>>
Python单元测试unittest实战
查看>>
python协程实时输出_Python 协程以及事件循环的问题,怎么知道 IO 读取结束了呢?...
查看>>
Python十进制&;包提供错误的结果
查看>>
Python化身“安全老中医”:一键搞定工控系统漏洞,从零基础到精通,收藏这篇就够了!
查看>>
Python加速运行技巧
查看>>
python办公自动化基础遍历文件夹
查看>>