博客
关于我
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 多处理 apply_async 永远不会在 Windows 7 上返回结果
查看>>
Python 多处理 Numpy 随机
查看>>
Python 多处理 >= 125 列表永远不会完成
查看>>
Python 多处理:在第一个子错误时中止映射
查看>>
Python 多处理不断产生 pythonw.exe 进程而不做任何实际工作
查看>>
Python 多处理从不加入
查看>>
Python 多处理如何优雅地退出?
查看>>
Python 多处理将子进程的标准输出重定向到 Tkinter 文本
查看>>
Python 多处理库错误(AttributeError:__exit__)
查看>>
Python 多处理模块的 .join() 方法到底在做什么?
查看>>
python 多线程与GIL
查看>>
python 多进程-基础
查看>>
python 多进程-进阶-进程池
查看>>
python 多进程-进阶-进程间通信之Pipe
查看>>
python 多进程-进阶-进程间通信之Queue
查看>>
python 如何“否定“value : 如果为真则返回假,如果为假则返回真
查看>>
Python 如何在 Web 环境中使用 Matplotlib 进行数据可视化
查看>>
python 字符串中特定字符替换,截取
查看>>
Python 字符串总结
查看>>
python 字符串显示中文_Python字符串开头的b"、u"、r"与中文乱码
查看>>