博客
关于我
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-返回给定x的多边形路径的y坐标
查看>>
python-进程池与线程池,协程
查看>>
Python-通过函数传递变量
查看>>
Python内置函数详解——总结篇
查看>>
Python.对象集合中的标识.和散列
查看>>
Python.硒.拖放错误“AttributeError:move_to 需要 WebElement“
查看>>
Python内置函数详解
查看>>
Python/Kivy:从一个类调用函数到另一个类并在 Python 中显示小部件
查看>>
Python/Kivy:我可以在双击标签时调用函数吗
查看>>
python内置函数5-frozenset()
查看>>
Python/Plotly:如何使用要显示的信息自定义悬停模板?
查看>>
Python/Selenium - 无法单击 www.instagram.com 上的“接受 cookie“按钮
查看>>
Python内置函数(35)——next
查看>>
python写入mysql
查看>>
python写入csv老是乱码或者各种不好
查看>>
Python内置函数
查看>>
Python2 安装MySQLdb库
查看>>
Python2 已终结,入手Python 3,你需要这30个技巧
查看>>
python写下拉列表在excel,无法使用python获取Excel下拉列表(组合框)值
查看>>