博客
关于我
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关于numpy.transpose函数详细解析附代码
查看>>
Python3导入自定义模块的3种方式
查看>>
python3打开txt文件_使用Python 3从文本文件读取句子并添加到列表中
查看>>
python3爬虫抓取智联招聘职位信息代码
查看>>
Python3爬虫数据入数据库---把爬取到的数据存到数据库,带数据库去重功能
查看>>
python3的 pymysql把mysqldb库取代了,让python 3支持mysqldb的解决方法
查看>>
Python3笔记——IDE的选择
查看>>
python3简单使用requests 用户代理,cookie池
查看>>
Python3组播通信编程实现教程(发送者+接收者)
查看>>
Python3编写网络爬虫10-数据存储方式三-CSV文件存储
查看>>
python3读取redis返回数据带有'b'的问题
查看>>
Python3连接MySQL
查看>>
Python关于isinstance函数的解析 | 附Demo(全)
查看>>
Python3:setup.py:完成所有任务的PIP安装(Build_ext+Install)
查看>>
python4.0 gil_Python 并发编程系列--1、浅谈GIL历史及对多线程的影响
查看>>
python60行绘图程序_天底下最简单的QT画图板,就一个类,60行代码
查看>>
Python: AES加密与解密
查看>>
Python: Range() 最大尺寸;动态的还是静态的?
查看>>
Python: Windows下用 multiprocessing 的深坑
查看>>
python:Could not find platform independent libraries <prefix>解决方法
查看>>