问题描述
- 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();
}
解决方案二：
http://www.divcss5.com/jiqiao/j510.shtml
解决方案三：
jquery选择器http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
时间： 2024-11-05 22:14:17