jq-精简菜单

最新推荐文章于 2021-11-12 19:39:33 发布
最新推荐文章于 2021-11-12 19:39:33 发布
阅读量176 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dengyan0823/article/details/83744915
版权

精简菜单

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/common/base.css" />
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.wrap ul {
			margin: 0 auto;
			width: 460px;
			overflow: hidden;
		}

		.wrap ul li {
			width: 150px;
			float: left;
			height: 30px;
		}

		.box {
			margin: 10px auto;
			width: 200px;
			border: 1px solid #ccc;
			line-height: 30px;
			text-align: center;
			background: url(img/down.gif) no-repeat 34px center;
		}
	</style>
</head>

<body>
	<div class="wrap">
		<ul>
			<li>
				<a href="javascript:void(0);">华为</a>
				<i>(1000)</i>
			</li>
			<li>
				<a href="javascript:void(0);">三星</a>
				<i>(1000)</i>
			</li>
			<li>
				<a href="javascript:void(0);">戴尔</a>
				<i>(1000)</i>
			</li>
			<li>
				<a href="javascript:void(0);">联想</a>
				<i>(1000)</i>
			</li>
			<li>
				<a href="javascript:void(0);">苹果</a>
				<i>(1000)</i>
			</li>
			<li>
				<a href="javascript:void(0);">小米</a>
				<i>(1000)</i>
			</li>
			<li>
				<a href="javascript:void(0);">红富士</a>
				<i>(1000)</i>
			</li>
			<li>
				<a href="javascript:void(0);">香水</a>
				<i>(1000)</i>
			</li>
			<li>
				<a href="javascript:void(0);">面膜</a>
				<i>(1000)</i>
			</li>
			<li>
				<a href="javascript:void(0);">戒指</a>
				<i>(1000)</i>
			</li>
			<li>
				<a href="javascript:void(0);">达利园</a>
				<i>(1000)</i>
			</li>
			<li>
				<a href="javascript:void(0);">百度</a>
				<i>(1000)</i>
			</li>
			<li>
				<a href="javascript:void(0);">乐视</a>
				<i>(1000)</i>
			</li>
			<li>
				<a href="javascript:void(0);">手镯</a>
				<i>(1000)</i>
			</li>
			<li>
				<a href="javascript:void(0);">玉佩</a>
				<i>(1000)</i>
			</li>
			<li>
				<a href="javascript:void(0);">皮包</a>
				<i>(1000)</i>
			</li>
			<li>
				<a href="javascript:void(0);">项链</a>
				<i>(1000)</i>
			</li>
			<li>
				<a href="javascript:void(0);">小说</a>
				<i>(1000)</i>
			</li>
			<li>
				<a href="javascript:void(0);">晨光</a>
				<i>(1000)</i>
			</li>
			<li>
				<a href="javascript:void(0);">其他品牌</a>
				<i>(1000)</i>
			</li>
		</ul>

		<div class="box">显示更多品牌</div>
	</div>
	<script src="js/jquery.js"></script>
	<script>
		$(function () {
			var aLi = $("ul li:gt(5):not(:last)");
			aLi.hide();
			$('.box').click(function () {
				if (aLi.is(":visible")) {  //:visible 选择器选取每个当前是可见的元素。
					aLi.hide();
					$('.box').css("background", "url(img/down.gif) no-repeat 34px center").text("全部品牌");
					$('ul li a').filter(":contains('香水'),:contains('玉佩')").css('color', 'blue');
				} else {
					aLi.show();
					$('.box').css("background", "url(img/up.gif) no-repeat 34px center").text("精选品牌");
					$('ul li a').filter(":contains('香水'),:contains('玉佩')").css('color', 'green');
				}
			})
		})

	</script>
</body>

</html>
dengyan0823
关注
Vue.js （ 比JQuery更加精简的前端框架）
m0_58495313的博客
01-20 956
Vue.js简介 什么是 Vue 什么是 Vue？ 考虑这个需求： 我们要把一个 json对象的数据，显示到一个元素上去。 如果不使用 Vue, 那么就会用到 JS 或者 JQuery，通过操作 HTML DOM 的方式，把数据显示上去。 如果使用Vue, 那么仅仅需要提供数据，以及数据要绑定到的元素的id,就行了,不需要显式地操作HTML DOM。 以下就用代码来表示这两种方式，通过比较，就知道Vue 是做什么的了。 JS 的 方式 1. 首.
5套漂亮后台模板css+html+jquery 精简
08-06
在后台模板中，jQuery常用于实现动态效果，如下拉菜单、弹出框、数据表格的排序和过滤等，提升了用户体验。 4. 模板设计：模板是一种预先设计好的布局，可以直接应用或稍作修改以适应特定项目。后台模板通常包括...
CSS3响应式二级导航菜单
01-24
这是一个HTML5+CSS3实现的响应式二级导航菜单，资源来源于网络，侵删
css3实现二级导航
bachi8584的博客
09-10 150
在上篇 css3 手风琴效果中得到灵感，通过简单css实现二级导航效果 首先页面结构还是通过无需列表嵌套来实现 <nav> <ul class='clearfix'> <li class="menu">item1 <ul class='s...
jq菜单-jq页面加载方式
weixin_43294560的博客
11-14 162
<html> <head> <meta charset="utf-8"> <title>jq 菜单案例</title> <script type="text/javascript" src="js/jquery-3.4.1.js" charset="utf-8"></script> <sc...
jQuery菜单（Menu）
qq_43264596的博客
11-09 1401
实现效果：垂直菜单需要点击触发事件弹出子菜单 水平菜单鼠标移动到菜单上就会弹出子菜单，鼠标移开 子菜单收起 1.垂直菜单布局 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;link type="t
jquery普通菜单
cdcdhj的博客
11-12 100
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <script> $(function(){ $(".mainmenu").mou
jquery 无限极下拉菜单的简单实例(精简浓缩版)
01-19
jquery 无限极下拉菜单的简单实例(精简浓缩版) <!doctype html> <html> <head> <meta charset=utf-8> <meta name=viewport content=width=device-width> <title>软件开发网 ...
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
12-01
京东菜单已经有不少JS前端爱好者仿写过，今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单，精简版代码 先看下jquery仿京东导航效果： 前端html代码如下： 代码如下: <ul> <li><a>baidu</a></li> ”tips...
利用css实现二级导航
Gardenia
09-02 388
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;导航&lt;/title&gt; &lt;style type="text/css"&gt; #header{
CSS3响应式二级导航菜单.zip
05-27
CSS3响应式二级导航菜单，自适应分辨率，兼容PC端和移动端，调整浏览器窗口大小查看效果。
CSS3水平二级导航菜单.zip
05-27
CSS3水平二级导航菜单，纯CSS3制作，红色风格，鼠标经过显示二级菜单。
纯CSS精美二级导航栏
05-09
纯CSS精美二级导航栏，博客http://www.cnblogs.com/hxsyl/p/4489518.html
jQuery动态菜单列表（树）
11-13
jQuery动态菜单列表（树），简单实用。与layui、easyui等前端框架，能很好的整合。
jQuery实现下拉菜单.
04-14
使用jQuery制作的一个下拉菜单，可以直接使用，使用的时候，建议将对应大文件放在指定的位置上，并修改link和script标签中的地址
jq 折叠菜单
橙-极纪元-cplvfx-JJY.Cheng
07-13 610
<div class="wtxiang2">美国标乐 <img src="images/995.png" style="position: absolute;top:6px;right: 20px;z-index: 1"> </div> <div class="zi" style="display: none"> <div clas...
纯css二级导航偌,纯css3实现的竖形二级导航
weixin_30941657的博客
08-03 300
之前为大家分享了好多导航菜单。今天给大家带来一款纯css3实现的竖形二级导航。这款导航菜单可以是无限级。一起看下效果图：实现的代码。html代码：Menu 1Submenu 1.1Submenu 1.1.1Submenu 1.1.2Submenu 1.1.2.1Submenu 1.1.2.2Submenu 1.2Menu 2Submenu 2.1Submenu 2.2Menu 3Submenu 3...
利用css写出二级导航
webnoob
03-09 1004
可以利用css伪类:hover就可以写出二级导航html代码：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;..&lt;/title&gt; &lt;link href="style.css" type=&qu
html二级导航栏主页,css3二级导航栏
weixin_31427047的博客
06-07 180
* {padding:0;margin:0;}ul,li,ol {list-style:none;}.tab1 {width:500px;height:50px;margin:30px auto 0;}.tab1 li {width:100px;height:50px;float:left;position:relative;transition:all 0.5s ease;transform-s...
jq -argjson怎么用
最新发布
07-21
使用`jq`命令的`--argjson`选项可以将JSON数据作为参数传递给`jq`命令。以下是`jq -argjson`的用法示例： ```bash #!/bin/bash # 定义JSON数据 json_data='{"param1": "value1", "param2": "value2"}' # 使用jq命令解析JSON数据 result=$(jq -n --argjson data "${json_data}" '$data.param1') # 打印结果 echo "$result" ``` 在上面的示例中，我们首先定义了一个JSON数据对象`json_data`。然后，我们使用`jq`命令的`-n`选项创建一个空的JSON对象，并使用`--argjson`选项将`json_data`作为参数传递给`jq`命令。 在`jq`命令中，我们使用`'$data.param1'`语法访问参数对象的属性`param1`。最后，我们将结果保存在变量`result`中，并使用`echo`命令打印出结果。 请注意，使用`--argjson`选项时，参数值必须是有效的JSON格式。如果JSON数据比较复杂或包含特殊字符，可以使用适当的转义或引号来处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值