內聯元素不jQuery函數

Question

工作後，這是我的代碼：

HTML：

<div id="top"> 
    <ul> 
    <li>Setting</li> 
    <li id="copyright">CopyRight</li> 
    <li id="e_copyright">&copy CopyRight Daarkoob Data Processing Co.</li> 
    </ul> 
</div> 

CSS：

#top { 
    background: #000; 
    height: 35px; 
    border-top: 1px solid #FFF; 
    color: #999; 
    text-align: left; 
    padding-bottom: 5px; 
} 

#top ul { 
    list-style-type: none; 
} 

#top ul li { 
    display: inline; 
    cursor: pointer; 
    margin-right: 50px; 
} 

#top ul li#e_copyright { 
    display: none; 
} 

JS：

$(document).ready(function(){ 
    $("#top ul li#copyright").click(function(){ 
    $("#top ul li#copyright").hide(function(){ 
     $("#top ul li#e_copyright").show(); 
    }); 
    }) 
}); 

當我點擊CopyRight，第三個li（e_copyright）顯示在底部設置，但我猜想它會出現在Settinf的內聯中，因爲我設置了li的顯示內聯。

如何將代碼更改爲在第二次點擊時出現第三個li？

Answer 1

另一種方法：這裏是一個代碼，點擊著作權行後添加li線。它只會使用one JQuery事件發生一次。

<div id="top"> 
    <ul> 
    <li>Setting</li> 
    <li id="copyright">CopyRight</li> 
    </ul> 
</div> 

$(document).ready(function(){ 
    $("#top ul li#copyright").one('click',function(){ 
    $("#top li:last").after('&copy CopyRight Daarkoob Data Processing Co.') 
    }); 
}); 

Answer 2

ID是唯一的，所以ID選擇器是最具體的，非冗餘的。不需要使用父選擇器，這隻會增加不必要的開銷。請參見下面的更新的代碼：

$(document).ready(function(){ 
    $("#copyright").click(function(){ 
     $(this).hide(); 
     $("#e_copyright").show().css('display','inline'); 
    }); 
}); 

Answer 3

試試這個：

$("#top ul li#copyright").click(function() { 
    $(this).hide(function() { 
     $(this).next().show().css({ 
      "display": "inline" 
     }); 
    }); 
}); 

Demo