Jquery导航条在项目中应用

最新推荐文章于 2018-10-08 16:11:00 发布

原创最新推荐文章于 2018-10-08 16:11:00 发布 · 519 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #导航 #应用 #选择器

学习同时被 3 个专栏收录

29 篇文章

订阅专栏

前端

15 篇文章

订阅专栏

jquery

2 篇文章

订阅专栏

本文通过实战演示如何使用JQuery创建一个可交互的导航条，包括元素的显示隐藏及元素的筛选操作。

一直在用Jquery，但从来都是直接套用被人写好的代码，或是改改，实现自己的目的。现在终于要自己系统的学习下Jquery了。相关教材是《Jquery权威指南》第二版陶国荣著；小伙伴们可以一起哦。从最基础开始就发现Jquery的选择器简直太神奇了。整个页面只有你想不到的，没有它取不到的元素类。

话不多说。搞起。

Jquery选择器的类型有哪些：

基本选择器
层次选择器
过滤选择器（其中包括有简单过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单对象过滤等等）
表单选择器

下面根据这些我们要做一个简单的导航条：如图所示。

当你点击“图片分类”标题后，它会将导航内容隐藏。如图下：

再次点击标题，就会展示导航，如下：

点击“更多”，你可以将导航进行折叠或者展开。如下图：

刚开始，做些简单的例子。

主要的代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>导航条在项目中的应用</title>
    <script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
    <style type="text/css">
        body{font-size:13px;}
        #divFrame{border:solid 1px #666;width:301px;overflow:hidden}
        #divFrame .clsHead{background-color:#eee;padding:8px;height:18px;cursor:hand}
        #divFrame .clsHead h3{
            padding:0px;margin:0px;float:left
        }
        #divFrame .clsHead span{float:right;margin-top:3px}
        #divFrame .clsContent{padding:8px;}
        #divFrame .clsContent ul{list-style-type:none;margin:0px;padding:0px;}
        #divFrame .clsContent ul li{float:left;width:95px;height:23px;line-height:23px;}
        #divFrame .clsBot{float:right;padding-top:5px;padding-bottom:5px} 
        .GetFocus{background-color:#eee}
        .sty{
            padding-left:5px;
            height:20px;
            width:15px;
        }
    </style>

    <script>
        $(function () {//页面加载事件
            $(".clsHead").click(function () {
                if ($(".clsContent").is(":visible")) {
                    $(".clsHead h3 img").attr("src", "img/down.png");//改变图片
                    $(".clsContent").css("display", "none");//隐藏内容
                }
                else {
                    $(".clsHead h3 img").attr("src", "img/up.png");
                    $(".clsContent").css("display", "block");//显示内容
                }
            });

            $(".clsBot>a").click(function () {
                if ($(".clsBot>a").text() == "简化") {
                    $("ul li:gt(4):not(:last)").hide();
                    $(".clsBot>a").text("更多");
                    $(".clsBot  img").attr("src", "img/left.png");
                }
                else {
                    $("ul li:gt(4):not(:last)").show().addClass("GetFocus");
                    $(".clsBot>a").text("简化");
                    $(".clsBot  img").attr("src", "img/right.png");
                }
            });
        });
    </script>
</head>
<body>
    <div id="divFrame">
        <div class="clsHead">
            <h3>图书分类<img src="img/up.png" class="img-responsive sty" /></h3>
            
            
        </div>
        <div class="clsContent">
            <ul>
                <li><a href="#">小说</a><i>(1110)</i></li>
                <li><a href="#">文艺</a><i>(1110)</i></li>
                <li><a href="#">青春</a><i>(1110)</i></li>
                <li><a href="#">少儿</a><i>(1110)</i></li>
                <li><a href="#">生活</a><i>(1110)</i></li>
                <li><a href="#">社科</a><i>(1110)</i></li>
                <li><a href="#">管理</a><i>(1110)</i></li>
                <li><a href="#">计算机</a><i>(1110)</i></li>
                <li><a href="#">教育</a><i>(1110)</i></li>
                <li><a href="#">工具书</a><i>(1110)</i></li>
                <li><a href="#">引进版</a><i>(1110)</i></li>
                <li><a href="#">其他类</a><i>(1110)</i></li>
                
            </ul>
            <div class="clsBot"><a href="#">简化</a>
                <img src="img/up.png" class="sty" />
            </div>
        </div>
    </div>
</body>
</html>

$(".clsContent").css("display","none");获取类名称为clscontent的元素集合，实现其内容的显示和隐藏。

$(".clsHead img").attr("src","img/up.png")；用来变换图片。

$("ul li:gt(4):not(:last)".hide(); 其中ul li 用来获取元素，“gt(4)”和":not(:last)"分别是两个并列的过滤选择条件。前者表示index大于4 ，后者表示不是最后一个元素。