<!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. Leetcode 63

    //一维dp还是比较难写的class Solution { public: int uniquePathsWithObstacles(vector<vector<int>>&a ...

  2. OATable中column栏位数据居中的实现方法及代码

    // Table column中显示居中的实现 // QpriceResultTable1 为table的名称 // noPrice 为table中的列 OATableBean table = (OA ...

  3. BZOJ2314 士兵的放置

    树形DP,恩然后就不会了... 先写了个错的离谱程序...果然WA了 然后开始乱搞,欸,对了! 令f[i], g[i], h[i]分别表示i号节点自己放士兵,被儿子上的士兵控制,不被儿子上的士兵控制但 ...

  4. windows配置Scrapy爬虫框架

    一.环境 Windows10 64位 Python2.7.13 64位 下面的安装步骤最好配置代理,可能会遇到被墙的情况. 二.Python的安装 可以去参考这篇文章:http://blog.csdn ...

  5. C++设计模式之适配器模式

    对象适配器有以下特点: 有的时候,你会发现,不是很容易去构造一个Adaptee类型的对象: 当Adaptee中添加新的抽象方法时,Adapter类不需要做任何调整,也能正确的进行动作: 可以使用多肽的 ...

  6. SharePoint Development - Custom Content Type using Visual Studio 2010 based SharePoint 2010

    博客地址 http://blog.csdn.net/foxdave 本文所述均来自之前实际的项目模块 首先再论述一下SharePoint ContentType内容类型 SharePoint的列表和文 ...

  7. Google Flutter框架：使用VS Code进行开发

    虽然进行安卓开发使用Android studio 比较方便 ,但是因为AS太臃肿而且还有一些404问题,就在打算如何进行高效的Android开发,于是找到了Flutter SDK, 他支持使用IDE进 ...

  8. ZetCode PyQt4 tutorial widgets I

    #!/usr/bin/python # -*- coding: utf-8 -*- """ ZetCode PyQt4 tutorial In this example, ...

  9. flask第二十八篇——HTML【1】table标签

    请关注公众号:自动化测试实战 以下内容参考:http://www.w3school.com.cn/tags/tag_table.asp <!DOCTYPE html> <html l ...

  10. timescaledb replication 使用

    replication 可以确保系统的ha 以及lb 数据的查询,timesacledb 使用pg 内置的stream replication 进行复制的支持 docker 运行参考 https:// ...