search

Home >Web Front-end >JS Tutorial >Navigation bar switching implemented by jQuery can show and hide_jquery

Navigation bar switching implemented by jQuery can show and hide_jquery

WBOY
WBOYOriginal
2016-05-16 16:33:131560browse

Use jQuery to implement some navigation bar switching, display and hiding. The main technologies used are slideToggle( ), toggeClass( ), toggle( ):

The code is as follows: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航条在项目中的应用</title>
<script language="javascript" type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(".tit").find("span").click(function(){
$(this).toggleClass("closeBtn2").parent().next().slideToggle(); //实现内容隐藏显示，及图标的切换
}) ;
$(".clsBot").click(function(){
$(this).parent().find("li:gt(4)").toggle(); //实现内容索引值大于4的隐藏或者显示

})
})
</script>
<style type="text/css">
*{ margin: 0;padding: 0;}
ul li{ list-style: none;}
.box{ width: 400px; margin: 100px auto; border: 1px solid #ddd;}
.tit{ background: #999; height: 30px; color: #fff; font-size: 14px; line-height: 30px; padding-left: 6px; position: relative;}
.closeBtn{ background: url("Images/a2.gif") no-repeat 0 0; width: 7px; height: 8px; position: absolute; right: 10px; top: 10px; display: block; text-indent: -9999px; cursor: pointer;}
.closeBtn2{background: url("Images/a1.gif") no-repeat 0 0;}
.content{padding: 6px;font-size: 12px; overflow: hidden; }
.content li{ float: left; width: 100px; height: 24px; }
.content li a{ color: #999;}
.content li a:hover{ color: red;}
.clsBot{ display: block; clear: both; background: url("Images/a5.gif") no-repeat right 0; padding-right: 16px; float: right; width: 26px; cursor: pointer; color: blue;}
</style>
</head>
<body>
<div class="box">
<div class="tit">
<h2>图书分类</h2>
<span class="closeBtn">关闭</span>
</div>
<div class="content">
<ul>
<li><a href="#">小说</a><i> ( 1110 ) </i></li>
<li><a href="#">文艺</a><i> ( 230 ) </i></li>
<li><a href="#">青春</a><i> ( 1430 ) </i></li>
<li><a href="#">少儿</a><i> ( 1560 ) </i></li>
<li><a href="#">生活</a><i> ( 870 ) </i></li>
<li><a href="#">社科</a><i> ( 1460 ) </i></li>
<li><a href="#">管理</a><i> ( 1450 ) </i></li>
<li><a href="#">计算机</a><i> ( 1780 ) </i></li>
<li><a href="#">教育</a><i> ( 930 ) </i></li>
<li><a href="#">工具书</a><i> ( 3450 ) </i></li>
<li><a href="#">引进版</a><i> ( 980 ) </i></li>
<li><a href="#">其它类</a><i> ( 3230 ) </i></li>
</ul>
<span class="clsBot">简化</span>
</div>
</div>
</body>
</html>

Rendering:

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of Javascript array sorting_Basic knowledgeNext article：Detailed explanation of Javascript array sorting_Basic knowledge

Related articles

See more