<!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. 原生javascript-图片滚动按需加载

    图片滚动按需加载:在某个区域的图片(自定义的范围,一般是首屏以下的区域),拉动滚动,图片出现在可视范围才开始加载,目的是减少请求,减耗宽带,提高首屏的呈现速度,让用户第一时间看到网页内容,留下美好的第 ...

  2. 牛客网——F求最大值

    链接:https://www.nowcoder.net/acm/contest/29/F来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K ...

  3. @InitBinder装配自定义编辑器

    @InitBinder装配自定义编辑器 第一步:BaseController.java,标注@InitBinder public class BaseController { @InitBinder ...

  4. Echart参数详解收藏

    最全: https://www.cnblogs.com/Kqingniao/p/5833419.html 柱形图: https://blog.csdn.net/qq_36330228/article/ ...

  5. IE、Chrome、Firefox 三大浏览器对比

    1. 代理 IE 浏览器设置代理位置在: [Internet 选项]⇒ [连接]选项卡 ⇒ [局域网设置],如下: Chrome 的代理配置界面完全同 IE,只是你设置路径在: [设置]⇒ [高级]⇒ ...

  6. BZOJ3295: [Cqoi2011]动态逆序对（树状数组套主席树）

    3295: [Cqoi2011]动态逆序对 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 7465  Solved: 2662[Submit][Sta ...

  7. windows server 2008 r2 修改远程登入的端口号(3389)

    步骤:打开“开始→运行”,输入“regedit”,打开注册表,进入以下路径:[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Terminal ...

  8. ubuntu系统无法ssh登录--安装openssh

    与红帽子系列的Linux发行版不同,Ubuntu系统安装后并不能直接进行ssh登录.需要手动安装openssh才行. Ubuntu安装openssh命令如下: sudo apt-get install ...

  9. mongodb sharding集群搭建

    创建虚拟机,如果是使用copy的方式安装系统,记得修改机器名,否则所有的机器名称都一样,会造成安装失败 同时关闭掉防火墙,将所有的机器的时间调成一致,master和slave的heartbeat间隔不 ...

  10. consul 1.2 支持service mesh

    主要说明: This release supports a major new feature called Connect that automatically turns any existing ...