为什么只有前两次点击有效。？

发布于
2016-05-17

<!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>

javascript

阅读 2.5k

4 个回答

wangfulin

✓ 已被采纳

改成下面这样就可以啦，因为你调用 show 这个方法会使 li 的行内样式设置成 style="display: none;" ，所以这个时候通过 $('li[display:none]') 选择器使选择不到的

<!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>

略懂码奴

913

发布于
2016-05-17

重点在这一行

$("li[style='display:none']").show();
修改为：

$("li:eq(4),li:eq(5)").show();

MaxValue

7851117

发布于
2016-05-17

  </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>

跟你的代码比较一下你就知道问题出在哪里了，我就不告诉你了。

li_develop

2437

发布于
2016-05-17

更新于
2016-05-17