为了账号安全,请及时绑定邮箱和手机立即绑定

哪里出了错,为什么只有前两次点击有效果。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>挑战题</title>
    </head>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript">    
    </script>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li style="display:none" >5</li>
            <li style="display:none">6</li>
            <li>7</li>
        </ul>
        <a href='#' >更多</a>
        <script type='text/javascript'>
        $("a").click(function(){
            if($("a").text()==='更多'){
              $("li[style='display:none']").show();
             $("a").text("简化");
        }else if($("a").text()==='简化'){
         $("li:eq(4)").hide();
         $("li:eq(5)").hide();
           $("a").text("更多");
        }
    }
   );
        </script>
    </body>
</html>



正在回答

3 回答

所有display:none     改为 display: none;   样式格式的问题

1 回复 有任何疑惑可以回复我~
#1

再去西藏 提问者

非常感谢!
2016-05-17 回复 有任何疑惑可以回复我~
#2

西瓜瓜瓜

请问为什么格式会有影响。。。
2016-05-17 回复 有任何疑惑可以回复我~

if($("a").text()==='更多'){
              $("li[style='display:none']").show();

这里改成$("li:hidden").show();就可以了,具体原因我也不造

0 回复 有任何疑惑可以回复我~
#1

西瓜瓜瓜

li:hidden就是指隐藏的li元素。。。
2016-05-17 回复 有任何疑惑可以回复我~
#2

慕粉3249650 回复 西瓜瓜瓜

那为什么display:none就不行呢,两者有什么区别吗
2016-05-18 回复 有任何疑惑可以回复我~

把$("li[style='display:none']").show();改成$("li:hidden").show();

因为当设置show()之后,变为style='display:block',再一次执行的时候,找不到li[style='display:none'],所以就不能再继续执行

1 回复 有任何疑惑可以回复我~
#1

再去西藏 提问者

谢谢 。
2016-05-17 回复 有任何疑惑可以回复我~
#2

慕粉3249650

但是点击简化的时候不是又执行了一次$("li:eq(4)").hide(); $("li:eq(5)").hide();吗,这个时候不是style='display:none'吗,还是说hide()和style='display:none'有区别?
2016-05-17 回复 有任何疑惑可以回复我~
#3

西瓜瓜瓜 回复 慕粉3249650

没有。。。。我上面的解释说的不对,不要看,只有第一句是对的。。。。
2016-05-17 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
jQuery基础课程
  • 参与学习       154768    人
  • 解答问题       7184    个

加入课程学习,有效提高前端开发速度

进入课程

哪里出了错,为什么只有前两次点击有效果。

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信