代码如下：

<head>里： 导入jQuery包： <script type="text/javascript" src="js/jquery-3.5.1.min.js" ></script> <script type="text/javascript"> $(function(){ $("span").click(function(){ // $(this) : 当前点击的对象 $(this).siblings().show().parent().siblings().children("li").hide(); }) }); </script> <body>里：内容 <ul><span>水果</span> <li>苹果</li> <li class="c1">橘子</li> <li>梨子</li> <li>香蕉</li> </ul> <ul><span>化妆品</span> <li>口红</li> <li id="i1">眼影</li> <li class="c1">腮红</li> <li>高光</li> </ul> <ul><span>护肤品</span> <li>水</li> <li class="c1">乳</li> <li>霜</li> <li>精华</li> </ul>

jQuery作业 点击显示的更多相关文章

  1. jQuery - 制作点击显示二级菜单效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. jquery Mobile点击显示加载等待效果

    点击某个按钮或链接时,触发等待加载效果: <script> <!-- $(document).bind("mobileinit", function(){ }); ...

  3. jquery实现点击显示，再点击隐藏

    //点击a标签,轮流显示和隐藏<div id="timo" style="background-color:red;height:50px;width:50px;& ...

  4. jQuery 点击显示再次点击隐藏

    <html> <head> <script type="text/javascript" src="/jquery/jquery.js&qu ...

  5. 基于Jquery UI的autocompelet改写，自动补全控件，增加下拉选项，动态设置样式，点击显示所有选项，并兼容ie6+

    Jquery UI的autocompelete改写 注意:实现功能,除了原版的自动补全内容外,增加一个点击显示所有选项,样式能动态设置. 加载数据的来源为后台数据库读取. 具体代码如下: 引用 从官方 ...

  6. jquery实现点击控制div的显示和隐藏

    我们使用点击显示.点击隐藏的时候,一般有两种可选方案 .示例 html <div class="index"> <h1> 首页 </h1> &l ...

  7. jQuery 二级菜单，一次显示一个小类 鼠标点击显示小类

    jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类 本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="ar ...

  8. 锋利的Jquery(点击显示隐藏div)

    点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  9. jquery 点击显示更多

    点击显示更多 html <div class="servicepicture banxin"> <div class="imgcontent" ...

随机推荐

  1. 深度优先遍历&广度优先遍历

    二叉树的前序遍历,中序遍历,后序遍历 树的遍历: 先根遍历--访问根结点,按照从左至右顺序先根遍历根结点的每一颗子树. 后根遍历--按照从左至右顺序后根遍历根结点的每一颗子树,访问根结点. 先根:AB ...

  2. 排序--HeapSort 堆排序

    堆 排 序 堆排序.就是通过堆结构来排序.可以看之前写的http://www.cnblogs.com/robsann/p/7521812.html .关于堆的结构 堆排序先要使结构堆有序.所以要先使所 ...

  3. Django使用联合主键

    今天闲着没事,突然想起一个以前遇到的一个小问题.一直忘了来验证自己的解决方案,所以今天特意来查询了些资料来验证下自己的想法.整理如下: 单张表内建立联合主键: class IotTemp(models ...

  4. 02day

    1.python注释(不执行) #:单行注释 ''' '''或者""" """:多行注释 2.python2中文解决方法 #coding=u ...

  5. Python音视频开发：消除抖音短视频Logo的图形化工具实现

    ☞ ░ 前往老猿Python博文目录 ░ 一.引言 在<Python音视频开发:消除抖音短视频Logo和去电视台标的实现详解>节介绍了怎么通过Python+Moviepy+OpenCV实现 ...

  6. 性能测试学习之路 （一）认识jmeter(性能测试流程 && 性能测试通过标准 &&jmeter体系结构)

    性能测试是通过自动化的测试工具模拟多种正常.峰值以及异常负载条件来对系统的各项性能指标进行测试. 1 性能测试技能树 性能测试是一项综合性的工作,致力于暴露性能问题,评估系统性能趋势.性能测试工作实质 ...

  7. javascript是面向对象的，怎么体现javascript的继承关系？

    一个简单的例子: var A =function(){ } A.prototype = { v : 5, tmp : 76, echo : function(){console.log(this.tm ...

  8. 使用 typescript 快速开发一个 cli

    cli 的全称 command-line interface(命令行界面),也就是前端同学常用的脚手架,比如 yo.vue cli.react cli 等. cli 可以方便我们快速创建项目,下图是引 ...

  9. 痞子衡嵌入式：了解i.MXRT1060系列ROM中串行NOR Flash启动初始化流程优化点

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是i.MXRT1060系列ROM中串行NOR Flash启动初始化流程优化点. 前段时间痞子衡写了一篇 <深入i.MXRT1050系 ...

  10. 百度前端技术学院-基础-day20-21

    第二十到第二十一天:让你和页面对话 task1 控制元素的显示及隐藏 实现以下功能: 当用户选择了 School 的单选框时,显示 School 的下拉选项,隐藏 Company 的下拉选项 当用户选 ...