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

这样也可实现 简单明了 就是不知道gt()和:not(:last)来控制<li>元素显示的内容这个要怎么干

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

这样也可实现 简单明了 就是不知道gt()和:not(:last)来控制<li>元素显示的内容这个要怎么干

正在回答

1 回答

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        var $hideLis = $("li:gt(4):not(:last)");
        $hideLis.hide();

        $("a").click(function(){
            if($hideLis.is(":hidden")){
                $(this).html("简化");
                $hideLis.show();
            }else{
                $(this).html("更多");
                $hideLis.hide();
            }
            return false;
        })
    });
</script>
</head>
    
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <a href="#">更多</a>
    </ul>
</body>
</html>


2 回复 有任何疑惑可以回复我~

举报

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

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

进入课程

这样也可实现 简单明了 就是不知道gt()和:not(:last)来控制<li>元素显示的内容这个要怎么干

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