程式師世界 >> 編程語言 >> 更多編程語言 >> 編程解疑 >> javascript-div中點擊更多按鈕顯示全部span標簽（帶換行），再點擊收起顯示部分span標簽

javascript-div中點擊更多按鈕顯示全部span標簽（帶換行），再點擊收起顯示部分span標簽

編輯：編程解疑

div中點擊更多按鈕顯示全部span標簽（帶換行），再點擊收起顯示部分span標簽

我想實現一個功能是一個div下面很多span標簽，剛開始加載頁面，顯示五個span，然後點擊更多，顯示全部，每10個換行顯示，
更多按鈕變成收起，再點收起，回到剛開始的5個span
但是我的代碼在點擊收起時，一個也不顯示了，怎麼回事？

我的代碼：

 <body>
<div id="showDiv">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span style="display: none;">6</span>
<span style="display: none;">7</span>
<span style="display: none;">8</span>
<span style="display: none;">9</span>
<span style="display: none;">10</span>
<span style="display: none;">11</span>
<span style="display: none;">12</span>
<br />
<span id="more" onclick="showMore()">更多</span>
<span id="less" style="display: none;" onclick="showLess()">收起</span>
</div>
<script type="text/javascript">
function showMore(){
var s = $("#showDiv span");
for(i=0; i<s.length;i++){
s.css("display","");
}
$("#more").hide();
$("#less").show();
}
function showLess(){
var s = $("#showDiv span");
for(i=5; i<s.length;i++){
s.css("display","none");
}
$("#less").hide();
$("#more").show();
}
</script>
</body>

最佳回答：

   function showMore() {
        $("#showDiv span").show();
        $("#more").hide();
        $("#less").show();
    }
    function showLess() {
        var s = $("#showDiv span");
        for (i = 5; i < s.length; i++) {
            s.eq(i).css("display", "none");///s.eq而不是s.css，s.css是所有對象
        }
        $("#less").hide();
        $("#more").show();
    }