                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础课程

请大神帮忙解决下我的问题，出现不了效果啊~

<style type="text/css">
        .hidden{
            display:none;
        }
    </style>
    
    <script type="text/javascript">
       
            $("#more").click(function(){
                var text = $("#more").text();
                if(text == '更多'){
                    $(".hidden").show();
                    $("#more").text("简化");
                }
                else{
                    $(".hidden").hide();
                    $("#more").text("更多");
                }
            });
        
            
    </script>
    <body>
        <ul>
            <li>1</li>
            <li>1</li>
            <li class="hidden">1</li>
            <li class="hidden">1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <a href="#" id="more">更多</a>
        </ul>
    </body>

我这么写哪里出问题了？

easyschen

2015-11-04

源自：jQuery基础课程 3-13

关注问题我要回答

276

操作

收起

2 回答

炸猪排超人
2015-11-23

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>挑战题</title>
        <style>
            li{display:none;}
            .show{display:block;}
        </style>
        <script src="https://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
    </head>
    
    <body>
        <ul>
          <li class="show">item01</li>
          <li class="show">item02</li>
          <li class="show">item03</li>
          <li class="show flag">item04</li>
          <li class="">item05</li>
          <li class="">item06</li>
          <li class="show">item07</li>
        </ul>
        <a href="#">更多</a>
        <script>
            $("a").click(function(){
                var $this = $(this),
                    val = $this.html();
                if(val === '更多'){
                    $this.html('简化');
                    $('li').addClass('show');
                }else{
                    $this.html('更多');
                    $('li.flag~li').removeClass('show');
                    $('li:last-child').addClass('show');
                }
                return false;
            });
        </script>
    </body>
</html>

看代码就好

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

收起回答

Y_du
2015-11-04

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>挑战题</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    </head>
    
    <style type="text/css">
        .hidden{
            display:none;
        }
    </style>
    
    <script type="text/javascript">
            function js_method(){
               var text = $("#more").text();
                if(text == '更多'){
                    $(".hidden").show();
                    $("#more").text("简化");
                }
                else{
                    $(".hidden").hide();
                    $("#more").text("更多");
                } 
            }
    </script>
    <body>
        <ul>
            <li>1</li>
            <li>1</li>
            <li class="hidden">1</li>
            <li class="hidden">1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <a href="javascript:void(0);" id="more" onclick="js_method();return false;">更多</a>
        </ul>
    </body>
</html>

两个问题，使用jq的时候要先引用<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

a的点击事件的先去掉去跳转<a href="javascript:void(0);" id="more" onclick="js_method();return false;">更多</a>