(如有错敬请指点,以下是我工作中遇到并且解决的问题)

效果图 :

可以通过 https://littlehiuman.github.io/07-menus/ 查看效果。

https://github.com/littleHiuman/littleHiuman.github.io 求点star~~~

点击各个菜单(自助餐、中山二三路、智能排序)会显示/隐藏二级菜单(二级菜单可能既有左侧内容也有右侧内容(三级菜单),也可能只有左侧内容)

CSS:

* {
margin:;
padding:;
}
li {
list-style: none;
} .menu {
width: 100%;
height: 20px;
background: #fff;
border-bottom: 1px solid #ddd;
overflow: hidden;
padding: 8px 0;
}
.menu_con {
text-align: center;
border-right: 1px solid #ddd;
width: 33%;
height: 20px;
line-height: 20px;
float: left;
cursor: pointer;
}
.menu_fon:last-child {
border-right: none;
}
.menu_title {
font-size: 14px;
} .pop_wrap {
display: none;
position: fixed;
top: 37px;
left:;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
clear: both;
} .pop_left,
.pop_right {
position: absolute;
height: 150px;
overflow: auto;
}
.pop_left {
background: #fff;
left:;
width: 40%;
}
.pop_right {
background: #ddd;
left: 40%;
width: 60%;
}
.pop_wrap li {
line-height: 30px;
padding-left: 20px;
border-bottom: 1px solid #eee;
}
.pop_wrap li.active {
color: #6ab494;
}
.pop_right li.active {
background: #eee;
}

HTML:

<div class="menu">
<div class="menu_con menu_type" onclick="showhide(0)">
<span class="menu_title">自助餐</span>
</div>
<div class="menu_con menu_position" onclick="showhide(1)">
<span class="menu_title">中山二三路</span>
</div>
<div class="menu_con menu_sort" onclick="showhide(2)">
<span class="menu_title">智能排序</span>
</div>
</div>
<div class="pop_wrap">
<ul class="pop_left"></ul>
<ul class="pop_right"></ul>
</div>

JAVASCRIPT:

var current = ''
function showhide(sth) {
var data = [
{
left: ['全部分类', '美食', '电影', '美食', '摄影', '摄影'],
right: ['全部', '经济型', '经济型', '经济型', '经济型', '经济型']
},
{
left: ['全部分类', '番禺区', '电影', '美食', '摄影', '摄影'],
right: ['全部', '经济型', '经济型', '经济型', '经济型', '经济型']
},
{
left: ['智能排序', '好评优先', '离我最近', '人均最低', '摄影', '摄影'],
right: []
}
]
var popWrap = document.querySelector('.pop_wrap')
var popLeft = document.querySelector('.pop_left')
var popRight = document.querySelector('.pop_right')
popLeft.innerHTML = setData(data[sth].left)
popRight.innerHTML = setData(data[sth].right)
if (popWrap.style.display == 'block') {
if (sth == current) {
popWrap.style.display = 'none'
} else {
current = sth
}
} else {
current = sth
popWrap.style.display = 'block'
}
}
function setData(data) {
var str = ''
if (data.length) {
for (var i = 0; i < data.length; i++) {
str += `<li ${i == 0 ? "class='active'" : ''}>${data[i]}</li>`
}
}
return str
}
 

JQuery实现多个菜单的显示隐藏的更多相关文章

  1. jquery 实现 <imput>标签 密码框显示/隐藏密码功能

    1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...

  2. 多个div独立控制其显示/隐藏

    今天要说一个神奇的html标签op,静态页下可以配合jquery分别控制每个层的显示/隐藏切换. 如果用动态中使用,用文章id做区分就可以了. <html> <head> &l ...

  3. 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  4. jQuery实现菜单点击隐藏(上下左右)

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

  5. 基于jquery封装通用的控制显示隐藏的方法

    应用场景 在项目中会存在大量这样的需求: 1.选择不同的radio单选框,页面上的部分内容随之显示隐藏 2.选择不同的option下拉框内容,页面上的部分内容随之显示隐藏 如果每次遇到这类需求都单独写 ...

  6. 用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示。

    用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...

  7. jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

    1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...

  8. Jquery一个slideToggle搞定div的隐藏与显示

    Jquery一个slideToggle搞定div的隐藏与显示 <!DOCTYPE html> <html> <head> <script src=" ...

  9. js和jquery实现显示隐藏

    (选择的重要性) 当点击同一个按钮的时候实现显示影藏 <a id="link" class="b-btn-four task-resolve add-sub-tas ...

随机推荐

  1. C# WinForms跨线程更新 UI

    与在Android中一样, 子线程中更新UI被认为是线程不安全的, 会抛出异常. 子线程返回UI线程中更新UI的一个方法为: 1, 捕获应用的UI线程的上下文; 2, 定义线程任务; 3, 定义线程任 ...

  2. linux中如何解决克隆后的电脑的问题

    1.如何解决克隆后的电脑的网络问题 克隆出来的电脑,IP地址,网卡都是重复的,不能直接使用,需要修改 1)vim  /etc/udev/rules.d/70-persistent-net.rules ...

  3. python的判断与循环

    一.python的特殊缩进与语法 对于Python而言代码缩进是一种语法,Python没有像其他语言一样采用{}或者begin...end分隔代码块,而是采用代码缩进和冒号来区分代码之间的层次.缩进的 ...

  4. luogu4196 [CQOI2006]凸多边形 半平面交

    据说pkusc出了好几年半平面交了,我也来水一发 ref #include <algorithm> #include <iostream> #include <cstdi ...

  5. 《Cracking the Coding Interview》——第8章:面向对象设计——题目4

    2014-04-23 18:17 题目:设计一个停车位的类. 解法:停车位,就要有停车.取车的功能了.另外我还加了一个工作线程用于计费,每秒给那些有车的车位加1块钱费用. 代码: // 8.4 Des ...

  6. JFinal 添加Druid插件

    第一步:添加依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</a ...

  7. 小程序使用Canvas画饼图

    先上效果图 -------------------------------------------------------------wxml代码开始------------------------- ...

  8. Linux认知之旅【04 进一步了解目录】!

    一.目录是什么? 二.不得不提的文件系统! 三.绝对路经,相对路径

  9. Linux再谈互斥锁与条件变量

    原文地址:http://blog.chinaunix.net/uid-27164517-id-3282242.html pthread_cond_wait总和一个互斥锁结合使用.在调用pthread_ ...

  10. hadoop2.5.2学习及实践笔记(六)—— Hadoop文件系统及其java接口

    文件系统概述 org.apache.hadoop.fs.FileSystem是hadoop的抽象文件系统,为不同的数据访问提供了统一的接口,并提供了大量具体文件系统的实现,满足hadoop上各种数据访 ...