<!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. wenzhang

    作者:周公子链接:https://zhuanlan.zhihu.com/p/94960418来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 2006年2月9日,首都经济 ...

  2. html5 新增的页面 元素

    figure 和 figcaption元素 test.html <!DOCTYPE html> <html lang="en"> <head> ...

  3. bzoj4002 [JLOI2015]有意义的字符串 特征根+矩阵快速幂

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4002 题解 神仙题. 根据下面的一个提示: \[ b^2 \leq d \leq (b+1)^ ...

  4. 触发redo写的几个条件

    触发redo写的几个条件   作者:eygle |English [转载时请标明出处和作者信息]|[恩墨学院 OCM培训传DBA成功之道]链接:http://www.eygle.com/archive ...

  5. 对https的研究

    HTTPS简介 超文本传输安全协议(英语:Hypertext Transfer Protocol Secure,缩写:HTTPS,常称为HTTP over TLS,HTTP over SSL或HTTP ...

  6. Java文件处理之FileReader可输出中文字符

    import java.io.FileNotFoundException; import java.io.FileReader; import java.io.IOException; public ...

  7. spring boot构建

    1.新建Maven工程 1.File-->new-->project-->maven project 2.webapp 3.工程名称 k3 2.Maven 三个常用命令 选 项目右击 ...

  8. 51nod1600 Simple KMP

    题目描述 对于一个字符串|S|,我们定义fail[i],表示最大的x使得S[1..x]=S[i-x+1..i],满足(x<i) 显然对于一个字符串,如果我们将每个0<=i<=|S|看 ...

  9. Favorite Donut

    Favorite Donut Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) ...

  10. xpath的几个常用规则

    我们在定位页面元素的时候呢,经常使用到xpath.xpah定位元素,我们可以使用开发者工具,然后右键选取元素的xpath ,但是这种方式得到的xpath是绝对路径,如果页面元素发生变动,经常会出现定位 ...