[JQ权威指南]第五天:导航条在项目中运用_单击标题时,可以伸缩导航条的内容-CSDN博客

本文链接：https://blog.csdn.net/david_520042/article/details/46564173

1。在页面中创建一个导航条。点击标题时，可以伸缩导航条的内容，标题中的提示图片也随之改变
2。单击“简化”连接时，隐藏指定的内容，并将“简化”字样改为更多；单击“更多”连接时，返回初始状态，并改变指定显示元素的背景色。

<!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>
</head>
<script language="javascript" type="text/javascript" src="jquery-2.1.4.js"></script>
<style>
    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}
</style>
<script  type="text/javascript">
    $(function(){//页面加载事件
        $(".clsHead").click(function(){//图片单击事件
            if($(".clsContent").is(":visible")){//如果内容可见
                $(".clsHead span img")
                .attr("src","Images/a1.gif");//改变图片
                //隐藏内容
                $(".clsContent").css("display","none");
                }
                else{
                        $(".clsHead span img")
                        .attr("src","Images/a2.gif");//改变图片
                        $(".clsContent").css("display","block");
                    }

        });
      $(".clsBot > a ").click(function(){//热点连接单击事件
          //如果内容为“简化”字样
          if($(".clsBot > a").text()=="简化"){
              //隐藏index号大于4且不是最后一项的元素
              $("ul li:gt(4):not(:last)").hide();
              //将字符内容更改为更多.
              $(".clsBot >a").text("更多");
              }else{
                  $("ul li:gt(4):not(:last)").show()
                   .addClass("GetFocus");
                   $(".clsBot > a").text("简化");
                  }
          });
          });
</script>
<body>
 <div id="divFrame">
    <div class="clsHead">
        <h3>图书分类</h3>
        <span><img src="Images/a2.gif"  alt=""/></span>
    </div>
    <div class="clsContent">
    <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><br />
   </ul>
    </div>
    <div class="clsBot">
        <a href="#">简化</a>
        <img src="Images/a5.gif" alt="" />
    </div>
 </div>
</body>
</html>