<!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. 移动web开发适配方案之Rem

    移动端为什么要做适配 移动端相对PC端来说大部分浏览器内核都是基于Webkit的,所以大部分都支持CSS3的最新语法.但是由于手机的屏幕尺寸和分辨率都不太一样(尤其是安卓),所以不得不对不同分辨率的手 ...

  2. java并发编程：线程安全管理类--原子操作类--AtomicIntegerArray

    1.类 AtomicIntegerArray

  3. 2018.12.20 L195

    Every Brazilian, including current and former members of the armed forces, will have to compromise u ...

  4. eclipse加入c标签

    在MyEclipse中使用jstl标签只需导读jstl.jar就能使用,但是在Eclipse中还需要一点小套路 步骤: 一.导入jstl.jar 二.导入导入standard.jar 三.在WEB-I ...

  5. “之”字形输出二叉树 python

    “之”字形输出二叉树即第1层从左到右输出,第2层从右到左输出,第3层从左到右输出......第2*n层从右到左输出,第2*n+1层从左到右输出,如下图所示二叉树,“之”字形输出的结果为:1-3-2-4 ...

  6. iOS KVC 和 KVO 区别简单总结

    KVC: key value coding,键值编码.是一种通过使用属性的名称(key)来间接访问对象属性的方法.这个方法可以不用通过 setter/getter 方法来访问对象的属性.该方法使用的实 ...

  7. 1月中旬值得一读的10本技术新书（机器学习、Java、大数据等）！

    1月中旬,阿里云云栖社区 联合 博文视点 为大家带来十本技术书籍(机器学习.Java.大数据等).以下为书籍详情,文末还有福利哦! 书籍名称:Oracle数据库问题解决方案和故障排除手册 内容简介 & ...

  8. ffmpeg C++程序编译时报__cxa_end_catch错误

    解决方法在编译sh中加上 -lsupc++ 即可. 2.STL模块函数找不到,链接失败stdc++/include/bits/stl_list.h:466: error: undefined refe ...

  9. CentOS+Apache虚拟主机域名设置

    首先注释掉 DocumentRoot /var/www/html     <virtualhost 192.168.1.105>     DocumentRoot /home/wxwb   ...

  10. AngularJS 最佳实践

    AngularJS 是一个 Web 应用框架,它实现了前端的 MVC 架构,能让开发人员很方便地实现业务逻辑. 举个栗子,要做到下面的效果,以前可能需要写一连串的 JavaScript 代码绑定 N ...