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

为什么点击不能实现?

<div class="ul">
        <ul>
            <li><a href="#">1佳能</a></li>
            <li><a href="#">2索尼</a></li>
            <li><a href="#">3三星</a></li>
            <li><a href="#">4尼康</a></li>
            <li><a href="#">5松下</a></li>
            <li><a href="#">6卡西欧</a></li>
            <li><a href="#">7富士</a></li>
            <li><a href="#">8柯达</a></li>
            <li><a href="#">9宾得</a></li>
            <li><a href="#">10理光</a></li>
            <li><a href="#">11奥林巴斯</a></li>
            <li><a href="#">12明基</a></li>
            <li><a href="#">13爱国者</a></li>
            <li><a href="#">14其他品牌相机</a></li>
        </ul>
        <div class="more">
            <a href="#"><span>显示全部品牌</span></a>
        </div>
</div>

$(function(){
         var $hides = $("ul li:gt(5):not(:last)");
         $hides.hide();
         var $btn = $("div.more a");
         $("$btn").click(function(){

             if($hides.is(":hidden")){

                 $hides.show();
                 $(this).find("span").text("精简显示品牌");
                 $("ul li")
                     .filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
                     .addClass("promoted");
             }
             else{
                 
                $hides.hide();
                 $(this).find("span").text("显示全部品牌");
                 $("ul li").removeClass("promoted");
                 
             }
             return false;
         });
     });

提问者 浅尝辄止123

添加回答

4回答
2017-01-11 心有猛虎_细嗅蔷薇

生命不必每时每刻都要冲刺,低沉时就当是放一个悠长假...

1.首先你的JS代码要包裹在

<script type="text/javascript">
    //$(function(){})
</script>

2.由于你贴的代码不全 猜测是并没有导入jQuery库

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>

3.http://img.mukewang.com/587580f6000138b506620243.jpg代码没有语法错误。检查DOM节点的选择是否与HTML中一致。(右边是正常显示的效果)


4.《锋利的jQuery》非常适合入门学jQuery(如果你需要这章练习的源码,我可以分享给你)。加油^_^

赞同3 反对 2个回复
未知生物
你还没有登录,请先登录注册慕课网帐号

回复
2017-01-11 MarlboroKay

这位同学不懒,个性签名很长,躲在大树后面会被部落看...

var $btn = $("div.more a");

这里应该是子类型选择器,代码应该为

var $btn = $("div.more > a");

希望对你有帮助,望采纳!

赞同2 反对 1个回复
未知生物
你还没有登录,请先登录注册慕课网帐号

回复
2017-01-11 心有猛虎_细嗅蔷薇

生命不必每时每刻都要冲刺,低沉时就当是放一个悠长假...

http://img.mukewang.com/5875e5d80001658206950141.jpg已分享。偶然发现你的评论->

不着急,慢工出细活。加油^_^

赞同 反对 2个回复
未知生物
你还没有登录,请先登录注册慕课网帐号

回复
2017-01-11 提问者 浅尝辄止123

努力学习!!


新手上路,望大神解惑!!!

赞同 反对 0个回复
未知生物
你还没有登录,请先登录注册慕课网帐号

回复
意见反馈 常见问题 APP下载
官方微信