<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .head{

            background-color: #2f96b4;

            color: red;

        }

        .content{

            min-height: 80px;

            background-color: green;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

    <div style="height: 400px;width: 200px;border: 1px solid #DDDDDD">

        <div class="item">

            <div class="head">标题1</div>

            <div id="i1" class="content hide">内容1</div>

        </div>

        <div class="item">

            <div class="head">标题2</div>

            <div id="i2" class="content hide">内容1</div>

        </div>

        <div class="item">

            <div class="head">标题3</div>

            <div id="i3" class="content hide">内容1</div>

        </div>

        <div class="item">

            <div class="head">标题4</div>

            <div id="i4" class="content hide">内容1</div>

        </div>

    </div>

<script src="jquery.js"></script>

<script>

    $('.head').click(function () {

        $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');

        // 当前点击的标签 $(this)

            // 获取某个标签的下一个标签

            // 获取某个标签的父标签

            // 获取所有的兄弟标签

            // 添加样式和移除样式

            // $('.i1').addClass('hide')

            // $('#i1').removeClass('hide')

            // var v = $("this + div");

            // $("label + input")

            // console.log(v);

            //

            // $("afsldkfja;skjdf;aksdjf")

            // 筛选器

            /*

            $(this).next()      下一个

            $(this).prev()      上一个

            $(this).parent()    父

            $(this).children()  孩子

            $('#i1').siblings() 兄弟

            $('#i1').find('#i1') 子子孙孙中查找

            // . . .

            //

            $('#i1').addClass(..)

            $('#i1').removeClass(..)

            */

            // 链式编程

            // $(...).click(function(){

            //     this..

            // })

//            $(this).next().removeClass('hide');

//            $(this).parent().siblings().find('.content').addClass('hide')

    })

</script>

</body>

</html>

　　

左侧菜单收缩的实现（包括，筛选器，addclass、removeclass、绑定事件，链式编程）的更多相关文章

  1. jQuery支持链式编程,一句话实现左侧table页+常用筛选器总结

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

  2. jQuery 筛选器 链式编程操作

    $('#i1').next() 下一个标签$('#i1').nextAll() 兄弟标签中,所有下一个标签$('#i1').nextUntil('#ii1') 兄弟标签中,从下一个标签到id为ii1的 ...

  3. jquery选择器，筛选器，属性，事件 基础

    左边栏实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  4. JQuery怎么实现页面左侧菜单刷新后保留鼠标点击addclass的样式？

    $('ul.main-menu li a').each(function(){ if($($(this))[0].href==String(window.location)) $(this).pare ...

  5. 链式编程:遇到多个构造器参数(Constructor Parameters)时要考虑用构建器(Builder)

    public class NutritionFacts { private final int servingSize; private final int servings; private fin ...

  6. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  7. jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)

    一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...

  8. jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏

    查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...

  9. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

随机推荐

  1. 05.Linux-CentOS系统本地Yum源搭建

    CentOS系统 1.挂载镜像光盘[root@localhost ~]# mount /dev/sr0 /media/cdrom/ 2.创建本地yum源仓库[root@localhost ~]# cd ...

  2. bzoj2085 [Poi2010]Hamsters 矩阵快速幂+字符串hash

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=2085 题解 考虑暴力 DP 的做法.令 \(dp[i][j]\) 表示以 \(j\) 为开头的 ...

  3. Vue 组件间的传值（通讯）

    组件之间的通讯分为三种 父给子传 子给父传 兄弟组件之间的通讯 1 父组件给子组件传值 子组件嵌套在父组件内部,父组件给子组件传递一个标识,在子组件内部用props接收,子组件在模板里可以通过{{}} ...

  4. k8s+jenkins

    1 server 的port , targetport, nodeport的区别 targetport为容器的暴露端口,为最后端的端口 port可以理解为pod的端口,pod是容器的外层,该端口可以在 ...

  5. php-redis 使用命令

    PHP 使用redis 一些命令参考:https://www.jianshu.com/p/68b7114a1d70

  6. 饿了么CTO张雪峰：允许90后的技术人员“浮躁“一点

    编者按:今年4月,饿了么正式加入了阿里新零售战队,进一步加速其在本地生活市场的扩张速度.在创业9年的时间中,饿了么在外卖领域经历了真正的“从0到1”,尤其是在外卖平台的技术升级方面,越过了一个又一个的 ...

  7. UE4开发PSVR游戏，使用RazorGPU进行调试的方法

    打开Project Launcher,如果没有需要的Devkit平台目标,就点下方的Device Manager,右键Claim 相应的目标.如果已经出现在Project Launcher中,点击上方 ...

  8. 前端工具【0】—— Emmet插件

    介绍:Emmet是许多流行文本编辑器的插件,它极大地改进了HTML和CSS工作流程 .为大部分流行的编辑器都提供了安装插件,核心是缩写语法+tab键(不同编辑器可自行设置),以下是我整理的常用知识点. ...

  9. php面试专题---MySQL分表

    php面试专题---MySQL分表 一.总结 一句话总结: 分库分表要数据达到一定的量级才用,这样才有效率,不然利不一定大于弊,可能会增加一次I/O消耗 1.分库分表的使用量级是多少? 单表行数超过 ...

  10. jQuery AJAX and HttpHandlers in ASP.NET

    https://www.codeproject.com/Articles/170882/jQuery-AJAX-and-HttpHandlers-in-ASP-NET Introduction In ...