<!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.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style>
<!-- 引入jQuery -->
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){ // 等待DOM加载完毕.
var $category = $('ul li:gt(5):not(:last)'); // 获得索引值大于5的品牌集合对象(除最后一条)
$category.hide(); // 隐藏上面获取到的jQuery对象。
var $toggleBtn = $('div.showmore > a'); // 获取“显示全部品牌”按钮
$toggleBtn.click(function(){
if($category.is(":visible")){
$category.hide(); // 隐藏$category
$('.showmore a span')
.css("background","url(img/down.gif) no-repeat 0 0")
.text("显示全部品牌"); //改变背景图片和文本
$('ul li').removeClass("promoted"); // 去掉高亮样式
}else{
$category.show(); // 显示$category
$('.showmore a span')
.css("background","url(img/up.gif) no-repeat 0 0")
.text("精简显示品牌"); //改变背景图片和文本
$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
.addClass("promoted"); //添加高亮样式
}
return false; //超链接不跳转
})
})
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>
效果图：
相关推荐
总的来说，`jQuery`通过简化DOM操作和提供丰富的动画功能，使得`ul_li`菜单的展开收起效果实现起来既直观又高效。在实际项目中，可以根据具体需求进行扩展和定制，以创建更复杂、更具有交互性的菜单系统。
本教程将详细介绍如何使用jQuery（简称JQ）来实现一个动态的导航菜单，其中包括下拉和收起的效果。 首先，理解jQuery库的基础知识至关重要。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画...
4. **动画效果**：`fadeIn()`, `slideDown()`, `slideUp()`等方法可以实现平滑的过渡动画，使下拉菜单的展开和收起更加流畅。 **CSS**在实现弹性效果中起着关键作用。通过设置适当的`display`属性（如`none`到`...
同时，运用CSS3的过渡效果，增加菜单项展开和收起的动画感。 3. jQuery交互：通过jQuery事件监听和DOM操作，实现在用户点击菜单项时，显示或隐藏对应的子菜单。例如，使用`.on('click', function() {...})`绑定点击...
在提供的压缩包中，"jq-down-menu.html"很可能是包含上述HTML结构和jQuery代码的示例文件，而"下拉.gif"则可能是一个动态图，展示了下拉菜单展开和收起的动画效果。 总之，通过jQuery，我们可以轻松实现一个功能...
`.animate()`函数可以让菜单的展开和收起过程更加平滑，提供更好的用户体验。通过设置动画的持续时间、缓动函数等参数，可以控制动画的速度和流畅性。 最后，为了确保菜单在不同屏幕尺寸下的适应性，开发者可能还...
在网页设计中，菜单树是一种常见的交互元素，用于组织和导航复杂的层级结构。jQuery 是一个广泛使用的 JavaScript 库，提供了丰富的功能来简化DOM操作、事件处理以及动画效果。本篇文章将详细探讨如何使用jQuery实现...
"jq收起展开效果"是指利用jQuery实现元素的隐藏与显示，这种功能常见于菜单、折叠面板或者任何需要动态隐藏和展示内容的场景。下面将详细讲解如何使用jQuery实现这样的效果。 首先，你需要在HTML文件中引入jQuery库...
4. **jQuery 动画**：在点击事件处理函数中，我们可以使用jQuery的动画方法来控制子菜单的展开和收起，如`slideDown()`和`slideUp()`，它们可以添加动画效果，使得用户体验更加友好。 5. **事件冒泡与阻止默认行为*...
jQuery库因其简单易用和强大的功能而深受开发者喜爱，其中，创建可展开收缩的下拉菜单是常见的需求，特别是对于多级导航菜单来说。本文将深入探讨如何利用jQuery实现一个可展开收缩的三级下拉菜单，并结合提供的代码...
在jQuery代码中，我们可以使用`.toggle()`方法来控制菜单的展开与收起，`.slideToggle()`则可以添加平滑的动画效果。此外，我们还可以利用`.children()`和`.find()`方法遍历菜单的子元素，确保点击某个菜单项时只...
4. 动画效果：为了提供更好的用户体验，可以添加展开和收起子菜单的动画效果，如滑动或淡入淡出。 5. 动态加载：对于深层级的菜单，为了避免一次性加载大量数据，可以采用懒加载策略，只在需要时才请求并显示子菜单...
2. **DOM操作**：jQuery提供了方便的方法来操作DOM，如`.hide()`和`.show()`来隐藏或显示子菜单，`.slideUp()`和`.slideDown()`实现平滑的展开/收起动画。 3. **条件判断**：根据屏幕宽度或其他条件，决定是否显示为...
在这个示例中，`stop().slideDown()`和`stop().slideUp()`方法用于控制二级菜单的动画效果，`stop()`可以防止连续快速滑过时的动画堆积，`slideDown()`和`slideUp()`则分别负责菜单的展开和收起动画。 为了使此功能...
"jq手风琴二级菜单"是利用jQuery实现的一种交互式导航菜单，它模拟了手风琴的开合动作，用户点击一级菜单时，相应的二级菜单会展开或收起，提供了一种高效的空间利用和用户友好的界面。 手风琴菜单通常由多个可折叠...
4. **jQuery动画**：MenuMatic可能利用jQuery的动画功能，如`fadeIn`和`slideToggle`，为菜单的展开和收起添加平滑的过渡效果。 5. **响应式设计**：现代网站必须考虑移动设备的兼容性，因此菜单可能需要在小屏幕...
在这个滑动菜单中，jQuery用于监听用户的滑动事件，触发菜单的展开和收起。 CSS（层叠样式表）在实现此效果中扮演了关键角色，主要负责菜单的样式设计和布局。通过使用媒体查询（Media Queries），CSS可以确保菜单...
这个功能通常应用于网站的导航栏，它允许用户在需要时展开菜单，不需要时将其收起，从而节省屏幕空间，提供更舒适的浏览环境。接下来，我们将深入探讨这个功能涉及到的技术细节。 首先，jQuery 是一个轻量级的...
通过设置适当的`display`属性（如`none`和`block`），我们可以控制菜单项的展开和收起。此外，`hover`伪类和`transition`效果可以用于实现鼠标悬停时的平滑过渡。 2. **jQuery选择器**：jQuery的选择器是其强大之处...