求大神解釋下代碼，有點糾結(jié)
以下兩段JAVASCRIPT代碼（以橫線隔開好區(qū)分大神看下），都是同樣的效果，為何用第一段是單機即可實現(xiàn)，第二段則需要雙擊呢（第二段A鏈接的那函數(shù)名我就不加了，那里都知道用來綁定函數(shù)，那里大神不用解釋）
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ? ? ? <title>挑戰(zhàn)題</title>
? ? ? ? <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
? ? </head>
? ??
? ? <body>
? ? <ul>
? ? ? ? <li>001</li>
? ? ? ? <li>002</li>
? ? ? ? <li>003</li>
? ? ? ? <li>004</li>
? ? ? ? <li>005</li>
? ? ? ? <li>006</li>
? ? ? ? <li>007</li>
? ? </ul>
? ? <a href="javascript:;" >更多</a> ?
? ? </body>
? ? <script type="text/javascript">
? ? $("li:eq(4)").css("display","none");
? ? ? ? ? ? ? ? $("li:last").css("display","none");
? ? ? ? ? ? $(function(){
? ? ? ? $("a").click(function(){
? ? ? ? ? ? if($("a").text() === "更多"){
? ? ? ? ? ? ? ? $("a").text("簡化");
? ? ? ? ? ? ? ? $("li:eq(4)").css("display","list-item");
? ? ? ? ? ? ? ? $("li:last").css("display","list-item");
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? $("a").html("更多");
? ? ? ? ? ? ? ? $("li:eq(4)").css("display","none");
? ? ? ? ? ? ? ? $("li:last").css("display","none");
? ? ? ? ? ? };
? ? ? ? ? ? });
? ? ? ? ? ? });
-------------------------------------------------------------------------------------------
$("li:eq(4)").css("display","none");
? ? ? ? ? ? ? ? $("li:last").css("display","none");
? ? ? ? ? ? function abc(){
? ? ? ? $("a").click(function(){
? ? ? ? ? ? if($("a").text() === "更多"){
? ? ? ? ? ? ? ? $("a").text("簡化");
? ? ? ? ? ? ? ? $("li:eq(4)").css("display","list-item");
? ? ? ? ? ? ? ? $("li:last").css("display","list-item");
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? $("a").html("更多");
? ? ? ? ? ? ? ? $("li:eq(4)").css("display","none");
? ? ? ? ? ? ? ? $("li:last").css("display","none");
? ? ? ? ? ? };
? ? ? ? ? ? });
? ? ? ? ? ??
? ? ? ? ? ? };
? ? </script>
? ??
??
2016-05-09
<!DOCTYPE html>
<html>
<head>
??? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
??? <title>挑戰(zhàn)題</title>
??? <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
??? <ul>
??????? <li>001</li>
??????? <li>002</li>
??????? <li>003</li>
??????? <li>004</li>
??????? <li>005</li>
??????? <li>006</li>
??????? <li>007</li>
??? </ul>
??? <a href="javascript:;" onclick="abc()">更多</a>
</body>
<script type="text/javascript">
??? $("li:eq(4)").css("display", "none");
??? $("li:last").css("display", "none");
??? function abc() {
??????? $("a").click(function () {
??????????? if ($("a").text() === "更多") {
??????????????? $("a").text("簡化");
??????????????? $("li:eq(4)").css("display", "list-item");
??????????????? $("li:last").css("display", "list-item");
??????????? } else {
??????????????? $("a").html("更多");
??????????????? $("li:eq(4)").css("display", "none");
??????????????? $("li:last").css("display", "none");
??????????? };
??????? });
??? };
</script>
</html>
這個是需要點擊兩次的代碼，如果你把$("a").click(function () {.....})這一層function去掉? 就可以實現(xiàn)點擊一次達到效果。
原因在于? <a href="javascript:;" onclick="abc()">更多</a>? 這個點擊事件觸發(fā)function abc() 當(dāng)該函數(shù)執(zhí)行到$("a").click(function ()? 這一步時，又需要觸發(fā)一次點擊事件? 才可以繼續(xù)調(diào)用該方法，讓程序往下進行。