首页 > 代码库 > 精简菜单和完整菜单之间进行切换
精简菜单和完整菜单之间进行切换
初始显示精简菜单：
点击显示所有品牌之后，将隐藏的品牌显示，并高亮显示推荐的品牌，而且此时button的文字变为“显示精简品牌”
show you code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<script src="http://www.mamicode.com/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之后的版本号就被废弃了，原因不明~
精简菜单和完整菜单之间进行切换
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。