精简菜单和完整菜单之间进行切换

最新推荐文章于 2024-11-04 10:13:26 发布
最新推荐文章于 2024-11-04 10:13:26 发布
阅读量141 收藏
点赞数
文章标签： javascript ViewUI

初始显示精简菜单：


点击显示所有品牌之后，将隐藏的品牌显示，并高亮显示推荐的品牌，而且此时button的文字变为“显示精简品牌”


show you code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<script src="jquery-1.11.1.min.js"></script>
<style type="text/css">
.category
{
	clear:both;
	float:left;
}
.category ul li
{
	width:300px;
	height:50px;
	float:left;
	list-style:none;
}
.showmore a span
{
	margin-left:40%;
	display:inline-block;
	margin-top:50px;
	background-color:#1ABC9C;
	padding-top:20px;
	padding-left:100px;
	width:200px;
	height:50px;
	border:1px black solid;
}
.highlight
{
	color:red;
}
</style>
</head>

<body>
<div class="category">
<ul>
<li>索尼</li>
<li>爱立信</li>
<li>华为</li>
<li>苹果</li>
<li>三星</li>
<li>中兴</li>
<li>联想</li>
<li>富士</li>
<li>可达</li>
<li>雅马哈</li>
<li>其它品牌</li>
</ul>
</div>
<br/>
<div class="showmore">
<a href=""><span>显示所有品牌</span></a>
</div>
<script type="text/javascript">
	var $category  = $(".category ul li:gt(6):not(:last)");
	$category.hide();
	var $togglebtn = $(".showmore a");
	$togglebtn.click(function(){
		if($category.is(":visible")){
			 $category.hide();
			 $togglebtn.html("<span>显示所有品牌</span>");
			 $("ul li").removeClass("highlight");
		}else{
			 $category.show();
			 $togglebtn.html("<span>显示精简品牌</span>");
			 $("ul li").filter(":contains('苹果'),:contains('华为'),:contains('三星')").addClass("highlight");
		}
		return false;
	});
</script>
</body>
</html>

我们首先通过以下的语句获得须要动态显示和隐藏的元素; 

	var $category  = $(".category ul li:gt(6):not(:last)");

并在初始状态下将其隐藏

       $category.hide();

然后获取超级链接元素：

	var $togglebtn = $(".showmore a");
然后对超链接元素加入click事件，在click触发的函数值中先推断$category部分是否显示

假设显示，则隐藏之。并去掉高亮显示的品牌。改动超链接内容

假设隐藏，则显示之，并为推荐品牌加入高亮属性。改动超链接内容。

由于click触发的事件中的if和else是交替运行的。所以我们能够使用toggle(event)函数进行优化。可是要说明的是：toggle(event)方法在jquery1.9之后的版本号就被废弃了，原因不明~


weixin_34391854
关注
jquery全部和精简筛选相互切换
06-10
一个可以展开或者折叠列表的jquery特效，该效果常常用于电子商务类网站。例如显示“全部”和显示“精品”，用做筛选效果还是很不错的 代码是比较简单的jquery代码，懂html代码的同学也可以自己看懂，方便修改使用
全部与精简切换显示jQuery实例教程
weixin_33810006的博客
12-16 427
下面是某网站上的一个品牌列表展示效果，用户进入页面时，品牌列表默认是精简显示的（即不完整的品牌列表）效果如下图所示： 用户可以单击商品列表下方的“显示全部品牌”按钮来显示全部的品牌。单击“显示全部品牌”按钮同时，列表会将推荐的品牌的名字高亮显示，按钮里的文字也换成了“精简显示品牌”。再次单击“精简显示品牌”按钮，即可回到初始状态。 实现这个示例，代码如下： <script...
python点击按钮窗口之间跳转_PyQt5点击按钮，实现界面之间的跳转思路
weixin_42309456的博客
02-21 5627
通过创建每个界面对象，点击按钮的时候，通过界面的隐藏或关闭，实现界面跳转，当子界面关闭时，再通过调用主界面显示，实现回调到主界面import sysfrom PyQt5.Qt import *from shouye import Ui_Formfrom login_pan import Loginfrom regist_pan import Registclass Shou_Ye(QWidget,...
全部和精简的切换
ITBOY_ITBOX博客
03-02 387
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>全部和精简的切换</title> <script type="text/javascript" src="../jquery-1.12.4.js"></script> <link rel="stylesheet" href="..
python窗口之间跳转_python：窗口之间的跳转
weixin_39747293的博客
02-21 4321
0，引言最近在帮课题组老师做一款石油专业数据处理与分析的窗口软件，出于促使自己学习新知识的目的，笔者选择采用刚刚才学会“hello world”的python。以下记录使用python实现窗口跳转的详细过程，便于今后查阅，也为大家提供参考。笔者才疏，如有笔误，请大佬指正。1，环境配置2，操作步骤a，第一个窗口文件(登录窗口文件login.py)[code]# -*- coding: utf-8 -...
精简型嵌入式管理系统的菜单实现和任务切换
08-03
任务的状态转换通过任务控制块（TaskPCB）进行管理，每个任务都有自己的状态、父菜单和子菜单标识，使得任务之间的导航更加灵活。当用户选择一个菜单项时，实际上是在切换到相应的任务或子菜单。 三、系统框架 ...
简单介绍菜单切换单页面网页模板
01-23
2. **菜单切换**：菜单切换是单页面网页中的关键交互元素。通常，菜单包含各个内容区的链接，点击后会通过平滑滚动或者动画效果定位到页面相应部分。这种导航方式直观且易于操作。 3. **HTML结构**：在单页面模板中...
js无限级折叠菜单精简版
10-28
本次解析的案例是一个简单的JavaScript实现的无限级折叠菜单，它允许开发者通过纯JavaScript来实现菜单的折叠和展开功能，而不需要依赖于jQuery库。 无限级折叠菜单通常包含以下几个关键知识点： 1. HTML结构：...
jQuery响应式网站导航菜单
05-01
// 使用滑动效果切换子菜单 }); ``` 这里，`stop()`方法用于停止当前的动画，防止鼠标快速移动时的延迟或闪烁，`slideToggle()`则在指定时间内以滑动方式切换元素的可见性。 最后，为了保证在页面加载时导航菜单...
StartIsBack Plus（win10开始菜单设置工具）官方正式版V2.9.9 | win10切换win7风格菜单
03-12
StartIsBack Plus 是一款短小精悍的win10开始菜单设置工具，能帮助用户将Win8和win10切换win7风格菜单，简化降低win10开始菜单设置难度，设置后的 Windows 8/10系统开始菜单像Win7一样经典好用，StartIsBack在同类...
JQuery - 第一课 某网站品牌列表精简/全部显示效果的实现
yuanliangbeyond的博客
12-28 737
JQuery - 第一课 某网站品牌列表精简/全部显示效果的实现 品牌列表，实现全部显示/精简显示的切换。   注意点： 1.思考诸如类似js/ajax的实现的思路，思考路线（思考ajax扩展）。 2.理解javascript基于事件模型的特点 3.理解Jquery常见函数能简化代码的优点       初始，精简显示   单击按钮， 全部显示，并高亮显示推荐品牌 ...
【python3.5 tkinter】页面跳转
热门推荐
tiandawangliang的专栏
02-10 2万+
主函数main.py from tkinter import * from LoginPage import * root = Tk() root.title('小程序') LoginPage(root) root.mainloop() 登陆界面函数LoginPage.py from tkinter import * from tkinter.messagebox import * fro
python：窗口之间的跳转
Bob_lb的博客
11-30 1万+
0，引言 最近在帮课题组老师做一款石油专业数据处理与分析的窗口软件，出于促使自己学习新知识的目的，笔者选择采用刚刚才学会“hello world”的python。以下记录使用python实现窗口跳转的详细过程，便于今后查阅，也为大家提供参考。笔者才疏，如有笔误，请大佬指正。 1，环境配置 （1）pyQt_designer（下载地址：https://www.qt.io/download） （...
使用jQuery实现展示列表的全展示与精简展示(包含文字加亮的实现)
qq_47888755的博客
08-17 1046
使用jQuery实现展示列表的全展示与精简展示实现效果代码 实现效果 （1）列表的全部展示（此时，可以对部分强调内容实现 加亮） （2）列表的精简展示（实现对于部分列表内容的展示） 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or
jQuery内容:精简显示与全部显示
weixin_40321535的博客
12-05 612
<head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <style type="text/css"> #div1 { margin: 0 auto;
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1137
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 392
关于react hooks的一些知识与应用
JavaScript 生成二维码
qq_30049249的博客
11-02 208
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
安利一款开源企业级的报表系统SpringReport
最新发布
luck332的专栏
11-04 455
SpringReport是一款企业级的报表系统，支持在线设计报表，并绑定动态数据源，无需写代码即可快速生成想要的报表，可以支持excel报表和word报表两种格式，同时还可以支持excel多人协同编辑，后续考虑实现大屏设计器功能，通过简单的设计器可以生成炫酷的大屏效果。
KN-850菜单操作指南：精简界面下的高级功能
DIS键用于功能扩展和菜单翻页，负责工作菜单和工程菜单中的选项切换。UP和DN键则用于设置量增减，以及在工作菜单中直接切换波段。 - RFPOWER旋钮控制射频功率输出，AFVOL旋钮调节低频增益，即音量。 - CW旋钮调整...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值