<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .header{

            background-color: antiquewhite;

        }

        .content{

            padding: 20px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

        <div class="item">

        <div class="header">菜单1</div>

        <div class="content hide">内容</div>

        </div>

        <div class="item">

        <div class="header">菜单2</div>

        <div class="content hide">内容</div>

        </div>

        <div class="item">

        <div class="header">菜单3</div>

        <div class="content hide">内容</div>

        </div>

</body>

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

<script>

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

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

    })

</script>

</html>

菜单与内容下拉jQuery的更多相关文章

  1. Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  2. Bootstrap下拉菜单、按钮式下拉菜单

    1. 概述 下拉菜单使用频率也是比较高的,比较常见的使用场景是在导航菜单栏,某个主菜单含有下拉的子菜单. Bootstrap为下拉菜单提供了两种实现方式,即普通的下拉菜单还有按钮式的下拉菜单.我们先看 ...

  3. Excel设置下拉菜单并隐藏下拉菜单来源单元格内容

    一.问题来源 做实验室的进展统计表,老师让加上开始时间和完成时间,时间格式:周几_上午(下午.晚上). 这样就可以了做下拉菜单,方便填写,而且格式统一,方便查看. 二.解决办法 2.1 下来菜单 红框 ...

  4. [moka同学笔记]yii2.0的下拉菜单与bootstrap下拉菜单

    1.yii2下拉菜单 <li class="dropdown"><a href="#" class="dropdown-toggle ...

  5. html年月日下拉联动菜单 年月日三下拉框联动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. iOS 下拉菜单 FFDropDownMenu自定义下拉菜单样式实战-b

    Demo地址:https://github.com/chenfanfang/CollectionsOfExampleFFDropDownMenu框架地址:https://github.com/chen ...

  7. jQuery事件控制点击内容下拉

    1.设计实例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  8. PHP——菜单及内容轮换（Jquery）

    效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  9. [ PHP+jQuery ] ajax 多级联动菜单的应用：电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板

    /** jQuery version: 1.8.3 Author: 小dee Date: 2014.11.8 */ 接上一篇博客. 实现带缓存的仿亚马逊下拉面板 效果图: 图1 初始 图2 点击省份 ...

随机推荐

  1. linux hosts.equiv设置解析

    hosts.equiv文件的用途与格式 一. hosts.equiv 文件的用途 /etc/hosts.equiv 和 $HOME/.rhosts 定义了哪些计算机和用户可以不用提供口令就在本地计算机 ...

  2. @Primary和@Qualifier这两个注解的意思（一句话概括）（二十七）

    @Primary和@Qualifier这两个注解的意思: @Primary:  意思是在众多相同的bean中,优先使用用@Primary注解的bean. @Qualifier : 这个注解则指定某个b ...

  3. IIS服务器禁用缓存的方法

    IIS服务器禁用缓存的方法: 工作中经常有实施的同事问我为什么界面皮肤图片替换后网站上没反应,要等很久才会出现结果.这个其实是服务器缓存的设置引起的问题,以前不知道怎么解决,临时的清缓存文件夹,有时候 ...

  4. vue.js 源代码学习笔记 ----- codegen.js

    /* @flow */ import { genHandlers } from './events' import { baseWarn, pluckModuleFunction } from '.. ...

  5. addpath

    这个命令见得很多了,一直懒得理他,自己直接加绝对路径.但是,这个破命令出现太多,我改得都掉脾气,写写. 1.  添加路径:addpath('当前路径中的文件夹名1','当前路径下的文件夹名2','当前 ...

  6. 《DSP using MATLAB》Problem 2.16

    先由脉冲响应序列h(n)得到差分方程系数,过程如下: 代码: %% ------------------------------------------------------------------ ...

  7. 企业web管理软件开发平台

    可以自定义拖动记忆位置的part桌面 权限(功能菜单查看范围)设置界面 权限(人员数据查看范围)设置界面 菜单排序和名称设置界面 业务模块 自定义字段界面 业务功能  列表界面 业务功能   查询界面 ...

  8. QLoo graphql engine 学习三 架构

    一张官方的参考图 说明 Storage Layer API 参考了kubernetes 的设计 qloo 组成 qloo 有qloo 服务以及envoy proxy 组合而成,envoy proxy ...

  9. Linux菜鸟入门级命令大全

    1. man 对你熟悉或不熟悉的命令提供帮助解释eg:man ls 就可以查看ls相关的用法注:按q键或者ctrl+c退出,在linux下可以使用ctrl+c终止当前程序运行.2. ls 查看目录或者 ...

  10. Javascript 中 switch case 等于 （== ）还是 恒等于（===）？

    Javascript 中 switch case 等于 (== )还是 恒等于(===)? 可以测试一下以下代码,这个 case 中是 等于(==)还是恒等于(===) <script> ...