博客
关于我
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/

你可能感兴趣的文章
python3 套接字异常(a byte-like object is required not str)
查看>>
python3 实现用户三次输入错误记录黑名单并对该用户登录锁定-day1
查看>>
python3 文本变图片
查看>>
Python3 查看 com 组件的属性
查看>>
python3 案例分享--发邮件
查看>>
python3 模板库_Python3 标准库概览_Python教程_我爱模板网 - 提供下载各种免费建站资源,免费网站模板,免费网页特效,让你爱上建站!...
查看>>
Python3 求最大/小值及索引值 Numpy
查看>>
python3+django使用celery执行某些任务失败的解决方案
查看>>
Python3+Requests+Unittest实战系列【一】
查看>>
python3+requests+unittest实战系列【一】
查看>>
python3+requests+unittest实战系列【二】
查看>>
Python3+Requests+Unittest实战系列【二】
查看>>
python3----ASCII
查看>>
Python3-selenium自动化测试框架,结合HTMLTestRunner测试报告!
查看>>
Python3-如何自我更新作为服务运行的应用程序
查看>>
Python3.1-网格模拟概念性问题
查看>>
Python3.12 解决conda环境libstdc++版本过低问题
查看>>
python3.2批量查询IP地址区域
查看>>
Python3.5中协程和未来/任务之间的区别?
查看>>
python3.5实现socket通讯(TCP)
查看>>