為什么隱藏效果沒有實(shí)現(xiàn)？
求大神解釋一下~~~
1、為什么第一次點(diǎn)擊”簡化“和“更多”有伸縮效果，再點(diǎn)擊就沒有伸縮效果了？
2、為什么點(diǎn)擊Head中的圖標(biāo)沒有出現(xiàn)收縮效果？而且為什么圖標(biāo)沒有出現(xiàn)在最右邊？下面是效果圖
代碼功能：點(diǎn)擊“簡化”，則把“社科“之后的幾個li隱藏掉，點(diǎn)擊”更多“則是顯示全部。但是我第一次點(diǎn)擊”簡化“可以實(shí)現(xiàn)隱藏，第二次點(diǎn)擊就不行了，不知道為什么？
<head>
????<title>導(dǎo)航條在項(xiàng)目中的應(yīng)用</title>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
????<script?type="text/javascript"?language="javascript"?src="Jscript/jquery-1.8.2.js"></script>
????<style?type="text/css">
????????body{font-size:?13px}
????????#divFrame{border:solid?1px?#666;width:301px;overflow:hidden;}
????????#divFrame?.Head{background-color:#eee;padding:8px;height:18px;cursor:hang;}
????????#divFrame?.Head?h3{padding:0px;margin:0px;float:left;}
????????#divframe?.Head?span{float:right;margin-top:4px;}
????????#divframe?.Content{padding:8px;}
????????#divFrame?.Content?ul{list-style:none;margin:0px;padding:0px;}
????????#divFrame?.Content?ul?li{float:left;width:95px;height:23px;line-height:23px;}
????????#divFrame?.Content?ul?li?a{color:#000;text-decoration:none;}
????????#divFrame?.Bot{float:right;padding-top:5px;padding-bottom:5px;}
????????.GetFocus{background-color:#eee;}
????</style>
????<script?type="text/javascript">
????????$(function(){
????????????$(".Head").click(function(){
????????????????if($("Content").is(":visible")){
????????????????????$("Head?span?img").attr("src","Images/a1.png");
????????????????????$(".Content").css("display","none");
????????????????}else{
????????????????????$("Head?span?img").attr("src","Imgaes/a2.png");
????????????????????$(".Content").css("display","block");
????????????????}
????????????})
????????????$(".Bot?>?a").click(function(){
????????????????if($(".Bot?>?a").text()=="簡化"){
????????????????????$("ul?li:gt(4):not(:last)").hide();
????????????????????$(".Bot?>?a").text("更多");
????????????????}
????????????????else{
????????????????????$("ul?li:gt(4):not(:last)").show();
????????????????????addClass("GetFocus");
????????????????????$(".Bot?>?a").text("簡化");
????????????????}
????????????})
????????})
????</script>
</head>
<body>
????<div?id="divFrame">
????????<div?class="Head">
????????????<h3>圖書分類</h3>
????????????<span><img?src="Images/a2.png"?alt=""/></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>(1110)</i></li>
????????????????<li><a?href="#">社科</a><i>(230)</i></li>
????????????????<li><a?href="#">管理</a><i>(1430)</i></li>
????????????????<li><a?href="#">計(jì)算機(jī)</a><i>(1560)</i></li>
????????????????<li><a?href="#">教育</a><i>(1110)</i></li>
????????????????<li><a?href="#">工具書</a><i>(230)</i></li>
????????????????<li><a?href="#">引進(jìn)版</a><i>(1430)</i></li>
????????????????<li><a?href="#">其他類</a><i>(1560)</i></li>
????????????</ul>
????????????<div?class="Bot">
????????????????<a?href="#">簡化</a>
????????????</div>
????????</div>
????</div>
</body>
2017-01-17
記得把JQ包改一下
<!DOCTYPE html>
<html>
??? <title>導(dǎo)航條在項(xiàng)目中的應(yīng)用</title>
??? <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
??? <script type="text/javascript" language="javascript" src="jquery-3.1.1.min.js"></script>
??? <style type="text/css">
??????? body{font-size: 13px}
??????? #divFrame{border:solid 1px #666;width:301px;overflow:hidden;}
??????? #divFrame .Head{background-color:#eee;padding:8px;height:18px;cursor:hang;}
??????? #divFrame .Head h3{padding:0px;margin:0px;float:left;}
??????? #divframe .Head span{float:right;margin-top:4px;}
??????? #divframe .Content{padding:8px;}
??????? #divFrame .Content ul{list-style:none;margin:0px;padding:0px;}
??????? #divFrame .Content ul li{float:left;width:95px;height:23px;line-height:23px;}
??????? #divFrame .Content ul li a{color:#000;text-decoration:none;}
??????? #divFrame .Bot{float:right;padding-top:5px;padding-bottom:5px;}
??????? .GetFocus{background-color:#eee;}
??? </style>
??? <script type="text/javascript">
??????? $(function(){
??????????? $(".Head").click(function(){
??????????????? if($("Content").is(":visible")){
??????????????????? $("Head span img").attr("src","Images/a1.png");
??????????????????? $(".Content").css("display","none");
??????????????? }else{
??????????????????? $("Head span img").attr("src","Imgaes/a2.png");
??????????????????? $(".Content").css("display","block");
??????????????? }
??????????? })
?
?$(".Bot > a").click(function(){
??????????????? if($(this).html()=="簡化"){
??????????????????? $(this).text("更多");
??????????????????? $("ul li:gt(4):not(:last)").hide();
??????????????? }
??????????????? else{
??????????????????? $(this).html("簡化");
??????????????????? $("ul li:gt(4):not(:last)").show();
??????????????????? addClass("GetFocus");
?????????????????? ?
??????????????? }
??????????? })
??????? })
??? </script>
</head>
<body>
??? <div id="divFrame">
??????? <div>
??????????? <h3>圖書分類</h3>
??????????? <span><img src="Images/a2.png" alt=""/></span>
??????? </div>
??????? <div>
??????????? <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>(1110)</i></li>
??????????????? <li><a href="#">社科</a><i>(230)</i></li>
??????????????? <li><a href="#">管理</a><i>(1430)</i></li>
??????????????? <li><a href="#">計(jì)算機(jī)</a><i>(1560)</i></li>
??????????????? <li><a href="#">教育</a><i>(1110)</i></li>
??????????????? <li><a href="#">工具書</a><i>(230)</i></li>
??????????????? <li><a href="#">引進(jìn)版</a><i>(1430)</i></li>
??????????????? <li><a href="#">其他類</a><i>(1560)</i></li>
??????????? </ul>
??????????? <div>
??????????????? <a href="#">簡化</a>
??????????? </div>
??????? </div>
??? </div>
</body>
</html>
2017-01-16
可以了。因?yàn)橛玫氖莟est不是html,這是有區(qū)別的，
?$(".Bot > a").click(function(){
??????????????? if($(this).html()=="簡化"){
??????????????????? $(this).text("更多");
??????????????????? $("ul li:gt(4):not(:last)").hide();
??????????????? }
??????????????? else{
??????????????????? $(this).html("簡化");
??????????????????? $("ul li:gt(4):not(:last)").show();
??????????????????? addClass("GetFocus");
?????????????????? ?
??????????????? }
??????????? })
??????? })