<!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. 安装FaaS

    [root@localhost ~]# [root@localhost ~]# new OS:centos-7 [root@localhost ~]# [root@localhost ~]# vim ...

  2. 前端每日实战：91# 视频演示如何用纯 CSS 创作一个行驶中的火车 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBLWzJ 可交互视频 此视频是可 ...

  3. 【leetcode】1037. Valid Boomerang

    题目如下: A boomerang is a set of 3 points that are all distinct and not in a straight line. Given a lis ...

  4. Python3解leetcode Kth Largest Element in a Stream

    问题描述: Design a class to find the kth largest element in a stream. Note that it is the kth largest el ...

  5. apache如何发布地图服务

    svg jpg Tomcat和apache是什么关系呢?:https://www.cnblogs.com/zangdalei/p/8057325.html geoserver又是怎么来的呢? Tomc ...

  6. 攻防世界 | hello_pwn

    看样子是要让我们通过read(0, &unk_601068, 0x10uLL),读入 unk_601068 将 dword_60106C 覆盖 6c-68=4,所以: from pwn imp ...

  7. 学习日记13、ajax同时提交from表单和多个参数

    if ($("form").valid()) { $.ajax({ url: "@Url.Action("EditCusAndCusCard")&qu ...

  8. PB TB级数据

    Byte.KB.MB.GB.TB.PB.EB.ZB.YB. 1KB=1000B1MB=1000KB1GB=1000MB1TB=1000GB 1TB=240B=1024MB 1PB=250B k M G ...

  9. 用redlock实现redis的分布式锁

    本文是一个demo,利用多进程,来模拟使用redis分布式锁的使用场景.本机需要安装redis,python3.7下运行代码.分布式锁用redlock这个包实现,实现步骤分三步: 实例化锁:rlock ...

  10. PHP7.2中AES加密解密方法mcrypt_module_open()替换方案 Function mcrypt_get_block_size() is deprecated

    直接粘代码,该类是基于微信公众号消息加密解密所提供的PHP DEMO改造而来,目前使用于彬彬大学APP接口token校验中. php的mcrypt 扩展已经过时了大约10年,并且用起来很复杂.因此它被 ...