2 sinat 27535917 sinat_27535917 于 2016.04.12 23:07 提问

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>

3个回答

showbo
showbo   Ds   Rxr 2016.04.13 09:00
已采纳
   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();
    }
devmiao
devmiao   Ds   Rxr 2016.04.12 23:50
sinat_27535917
sinat_27535917 那这个收起功能怎么做?
一年多之前 回复
sinat_27535917
sinat_27535917 那这个收起功能怎么做?
一年多之前 回复
sinat_27535917
sinat_27535917 那这个收起功能怎么做?
一年多之前 回复
ImagineCode
ImagineCode   2016.04.13 10:04
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!