<!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. HDU 4122 单调队列

    转载自:http://blog.csdn.net/lvshubao1314/article/details/46910271 DES :给出n个订单和m是商店的开放时间.然后n行给出n个订单的信息.然 ...

  2. 在返回值拒绝——reference

    在上一篇博客中,我们介绍了简单地使用值传递带来的种种麻烦,相信有些朋友会一心一意将其斩草除根,但是当返回值也使用了引用的时候,麻烦就来了. 依然来个简答的例子 class Rational { pub ...

  3. RGB2YCbCr RGB2Gray

    Y = 0.2990R+0.5870G+0.1140B;                        Cb=-0.1687R-0.3313G+0.5000B+128;                 ...

  4. jquery检测input checked 控件是否被选中的方法

    jquery检测input checked 控件是否被选中 js部分 复制代码代码如下: function tongyianniu(){ var gouxuan=$('input[type=check ...

  5. windows下搭建svn服务器及权限配置

    服务器端VISUALSVN SERVER 3.3.1 下载地址 https://www.visualsvn.com/server/download/ 客户端TortoiseSVN 1.8.13下载地址 ...

  6. SSRS 在使用矩阵的时候，隐藏掉一列空白值

    SSRS 在使用矩阵的时候会因为数据集中含有NULL导致出现一列空白值 数据结果如图: 然后以houseid 作为矩阵组列,productcode作为行, 列名196前面多出就是NUll的列,那么我们 ...

  7. 自动化测试--响应请求测试（.net)

    Web运行原理简单地说是“浏览器发送一个HTTP Request到Web服务器上,Web服务器处理完后将结果(HTTP Response)返回给浏览器”. 通常测试一个web api是否正确,可以通过 ...

  8. 每天一个linux命令（网络）：【转载】route命令

    Linux系统的route命令用于显示和操作IP路由表(show / manipulate the IP routing table).要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器,或 ...

  9. Mysql Workbench 连接CentOs MySQL

    系统环境: 计算机ip:192.168.1.105  CentOS+Mysql 远程计算机ip:192.168.1.118  Win7+MySQLWorkbench   登陆服务器:bin/mysql ...

  10. MyEclipse 代码里的中文字太小设置方法

    General>Appearance>Colors and Fonts>Basic>Text Font >Edit 把脚本字符改成“中欧字符”就可以了