<!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. NLP 自然语言处理之综述

    (1) NLP 介绍 NLP 是什么? NLP (Natural Language Processing) 自然语言处理,是计算机科学.人工智能和语言学的交叉学科,目的是让计算机处理或"理解 ...

  2. css定位选择兄弟元素，nth-of-type

    <span class="input-group-btn" the-id="num-change"> <button class=" ...

  3. Tunnel connection failed: 407 Proxy Authentication Required

    报错信息 : Retrying (Retry(total=4, connect=None, read=None, redirect=None, status=None)) after connecti ...

  4. 创建entityManager

    1 需要persistence.xml 完全通过属性配置没成功 <persistence xmlns="http://java.sun.com/xml/ns/persistence&q ...

  5. LeetCode--058--最后一个单词(java)

    给定一个仅包含大小写字母和空格 ' ' 的字符串,返回其最后一个单词的长度. 如果不存在最后一个单词,请返回 0 . 说明:一个单词是指由字母组成,但不包含任何空格的字符串. 示例: 输入: &quo ...

  6. LeetCode--040--组合总和 II(java)

    给定一个数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的每个数字在每个组合中只能使用一次. ...

  7. UITextField 长按文本框指定删除某个位置内容

    普通的光标移动,点键盘的删除键,会从最后一位删除,加一UITextField的分类即可 #import <UIKit/UIKit.h> @interface UITextField (Ex ...

  8. spring security 权限框架原理

    spring security 权限框架原理

  9. sublime px转rem插件

    http://www.cnblogs.com/phoebewang00/p/5593699.html lime 插件- px 转rem   一个CSS的px值转rem值的Sublime Text 3自 ...

  10. 黑苹果 MacOS 10.15 Catalina安装教程

    10.15 Catalina 桌面 一.准备工作 一个8G以上的U盘(有的U盘标的是8G,实际只有7.X,实际容量小于7.5G的会失败) MacOS镜像.TransMac(刻录工具).DiskGeni ...