<!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. Qt Creator 不能输入中文怎么解决？

    Qt Creator 2.7.2不能输入中文怎么解决?之前提的问题自己后来找到解决方法后就忘了, 方法很简单,只要设置一下环境变量就行了export QT_IM_MODULE=ibus qt5.4.r ...

  2. linux基础知识（三）

    添加用户 •useradd -d 家目录 -g 组名 -G 组集合(逗号间隔) -p 密码 -s 用户shell程序 用户名 •useradd -d /usr/local/nginx/ -g ngin ...

  3. LA 3263 That Nice Euler Circuit(欧拉定理)

    That Nice Euler Circuit Little Joey invented a scrabble machine that he called Euler, after the grea ...

  4. 随笔2 AbstractMap<K,V>

    上一篇写了Map接口的源码分析,这一篇写一下Map接口的一个实现类AbstractMap,从名字就可以看出这是一个抽象类,提供了Map接口的骨架实现,为我们实现Map接口的时候提供了很大的便利.在这里 ...

  5. java并发学习第五章--线程中的锁

    一.公平锁与非公平锁 线程所谓的公平,就是指的是线程是否按照锁的申请顺序来获取锁,如果是遵守顺序来获取,这就是个公平锁,反之为非公平锁. 非公平锁的优点在于吞吐量大,但是由于其不是遵循申请锁的顺序来获 ...

  6. thinkphp 视图view

    一. 继承Controller类 <?php namespace app\index\controller; use http\Params; use think\Config; use thi ...

  7. 三栏布局的三个典型方法（圣杯、双飞翼、flex）

    聊聊三栏布局----左右定宽,中间自适应. 效果图: 圣杯布局 <!DOCTYPE html> <html> <head lang="en"> ...

  8. 6.dockerfile

    一.概述 自制镜像的目的不是为了解决配置更新的问题,而是为了定制化应用服务. 镜像的制作:基于容器制作:dockerfile dockerfile的格式:注释信息+指令(约定俗成使用大写)及其参数 d ...

  9. final、finally、 finalize区别

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11444366.html final final可以用来修饰类.方法.变量,分别有不同的意义,final ...

  10. re正则常用示例积累

    2019-12-7 import re ''' 示例1: 提取网站的网址 ''' urls = ['https://blog.csdn.net/xxcupid/article/details/5199 ...