JQuery链式操作简单的菜单列表
看到这个简单的菜单demo,也是为了再看看JQuery对DOM的操作,一直都记不牢,特别是siblings()这个总是想不起来。
这次再过一遍JQuery,不管简单的还是复杂的demo 还是坚持练习一遍吧!只为记录,如果同时能给你提供帮助,这样最好!
<style>.wrap{width: 100%;}.inner{width: 62.5%;margin: auto;padding: 50px;border:1px solid #ccc;box-sizing:border-box;}.menu{width: 100%;}.sub-nav{cursor: pointer;color: #333;font-size: 16px;font-weight: bold;padding: 5px;background: #ccc;overflow: hidden;}a{float: left;width: 100%;background: #333;color: #fff;padding: 5px;display: none;}.light{color: #3c763d;background: #999999;}</style>
上面css没有写的多么严禁,样式就一带而过吧。
<div class="wrap"><div class="inner"><div class="menu"><div class="sub-nav"><span>The first chapter</span><a href="javascript:;">The first section</a><a href="javascript:;">The second section</a><a href="javascript:;">The third section</a><div style="clear: both;"></div></div><div class="sub-nav"><span>The second chapter</span><a href="javascript:;">The first section</a><a href="javascript:;">The second section</a><a href="javascript:;">The third section</a><div style="clear: both;"></div></div><div class="sub-nav"><span>The third chapter</span><a href="javascript:;">The first section</a><a href="javascript:;">The second section</a><a href="javascript:;">The third section</a><div style="clear: both;"></div></div></div></div></div>
同样的也没什么多描述的。就一坨放在这里了。
<script>$(function () {$('.sub-nav').click(function () {$(this).addClass('light').children('a').show().end().siblings().removeClass('light').children('a').hide();})})</script>
不同的代码风格 看起来肯定舒适度不一样,这样一口气的真头大。为了增强记忆一个一个的分析下。
提倡一行写一个操作。
2017-02-08
转载于:https://www.cnblogs.com/vince-cup/p/6377605.html
JQuery链式操作简单的菜单列表相关推荐
- jQuery链式操作[转]
用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass( ...
- 仿Jquery链式操作的xml操作类
经常需要对xml文件进行操作,参考了Jquery的链式操作后实现了xmlHelper类. 代码 using System; using System.Data; using System.Config ...
- jquery链式写法 java_jQuery链式操作
两个问题 1.jQuery的链式操作是如何实现的? 2.为什么要用链式操作? 大家认为这两个问题哪个好回答一点呢? 链式操作 原理相信百度一下一大把,实际上链式操作仅仅是通过对象上的方法最后 retu ...
- jQuery的链式操作
什么是链式操作呢?我们来看看,本来应该写 成这样子的: $(".stripe tr").mouseover(function(){$(this).addClass("ov ...
- php加数据库开发案例,PHP简单数据库操作类实例【支持增删改查及链式操作】
本文实例讲述了PHP简单数据库操作类.分享给大家供大家参考,具体如下: 在进行项目开发时,数据库是必不可少的东西了.但是很多时候却又对数据库SQL语句的繁杂而感到头疼.提供一个我自己使用的数据库操作类 ...
- php框架中数据库模型层原理,简单模拟ThinkPHP框架模型层对数据库的链式操作-Go语言中文社区...
在接口被实例化以后的每个方法中return 类本身就可以达到链式操作. 改善了写多行代码执行一次操作的缺点. 下面请看我的代码,若有疑问,请留言给我. class Instance{ public s ...
- 大话PHP设计模式:类自动载入、PSR-0规范、链式操作、11种面向对象设计模式实现和使用、OOP的基本原则和自动加载配置...
一.类自动载入 SPL函数 (standard php librarys) 类自动载入,尽管 __autoload() 函数也能自动加载类和接口,但更建议使用 spl_autoload_registe ...
- PHP中的__toString方法(实现JS里的链式操作)
_toString方法是在打印对象时自动调用的魔术方法,如果不声明会报以下错 Catchable fatal error: Object of class String could not be co ...
- PHP 链式操作 - 学习/实践
1.应用场景 了解学习借鉴 php[框架中]实现链式操作实现原理 2.学习/操作 测试环境: win10 64位 专业版 2.1 //适用于php 自带的内置函数调用 比如: 在php中有很多字符串函 ...
最新文章
- 几个流行移动前端框架的比较评分
- oracle备份片校验,oracle rman 备份日志单独备份和交叉校验
- ITK:创建一个自定义颜色图
- android 高度上分权重,安卓自适应布局(关于权重weight的使用技巧!)
- system函数和popen函数使用方法
- html5--3.16 button元素
- eclipse idea对比_Idea必须配置的环境变量(自己总结)
- mysqlbackup 重建带有gtid特性的slave
- fzu 2204 7 dp
- ant 安装依赖bug1
- 网易公开课 “可汗学院”《统计学》学习笔记
- Unity小地图中点击角色移动功能 (附上demo)
- 百度为何力推直达号?为了移动商业化
- 矩阵在游戏开发中的应用
- 图解复盘总结和报告模板实例
- Ice飞冰注意问题和可视化组件《三》
- windows下qt程序报错“the inferior stopped because it triggered an exception”
- 算法工程师0——算法工程师学习进阶路线
- 为西部AV和IT集成商构建国际合作平台
- 用python 画太阳_Python PIL画一个太阳神的圆圈
热门文章
- 一步一步教你实现iOS音频频谱动画(一)
- 【计蒜客习题】消除字符串
- salesforce lightning零基础学习(三) 表达式的!(绑定表达式)与 #(非绑定表达式)
- java中的内部类总结
- strcpy,memcpy,memset函数实现
- 【Java MyBatis Generator】使用generator自动生成Dao,Mapping和实体文件
- WebDAV方式访问Exchange 2003收件箱程序
- .Net如何统计在线人数
- PHP-面向对象编程教程
- spring webscoket服务端使用记录