qq_61294100 2022-12-15 15:32 采纳率: 81.8%
浏览 35
已结题

html css jQuery实现品牌展示

问题遇到的现象和发生背景

代码无法跳到else语句中是为什么?是”if($("li:gt(5):not(:last):hidden")){“这个判断代码哪里写错了吗

用代码块功能插入代码,请勿粘贴截图。 不用代码块回答率下降 50%
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示练习</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 12px;
    text-align: center;
}

a {
    color: #04D;
    text-decoration: none;
}

a:hover {
    color: #F50;
    text-decoration: underline;
}

.SubCategoryBox {
    width: 600px;
    margin: 0 auto;
    text-align: center;
    margin-top: 40px;
}

.SubCategoryBox ul {
    list-style: none;
}

.SubCategoryBox ul li {
    display: block;
    float: left;
    width: 200px;
    line-height: 20px;
}

.showmore , .showless{
    clear: both;
    text-align: center;
    padding-top: 10px;
}

.showmore a , .showless a{
    display: block;
    width: 120px;
    margin: 0 auto;
    line-height: 24px;
    border: 1px solid #AAA;
}

.showmore a span {
    padding-left: 15px;
    background: url(img/down.gif) no-repeat 0 0;
}

.showless a span {
    padding-left: 15px;
    background: url(img/up.gif) no-repeat 0 0;
}

.promoted a {
    color: #F50;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function() {
        $("li:gt(5):not(:last)").hide();
        $("a:last span").click(function () {
            $("li:gt(5):not(:last)").toggle();
            if($("li:gt(5):not(:last):hidden")){
                $("a:last span").text("显示全部品牌");
                $("div div").removeClass();
                $("div div").addClass("showmore");
                $("li:contains('明基')").removeClass();
                alert("vvv")

            }else{
                $("a:last span").text("显示精简品牌");
                $("div div").removeClass();
                $("div div").addClass("showless");
                $("li:contains('明基')").addClass("promoted");
            }
                return false;
        })
    });
</script>
</head>
<body>
    <div class="SubCategoryBox">
        <ul>
            <li><a href="#">佳能</a><i>(30440) </i></li>
            <li><a href="#">索尼</a><i>(27220) </i></li>
            <li><a href="#">三星</a><i>(20808) </i></li>
            <li><a href="#">尼康</a><i>(17821) </i></li>
            <li><a href="#">松下</a><i>(12289) </i></li>
            <li><a href="#">卡西欧</a><i>(8242) </i></li>
            <li><a href="#">富士</a><i>(14894) </i></li>
            <li><a href="#">柯达</a><i>(9520) </i></li>
            <li><a href="#">宾得</a><i>(2195) </i></li>
            <li><a href="#">理光</a><i>(4114) </i></li>
            <li><a href="#">奥林巴斯</a><i>(12205) </i></li>
            <li><a href="#">明基</a><i>(1466) </i></li>
            <li><a href="#">爱国者</a><i>(3091) </i></li>
            <li><a href="#">其它品牌相机</a><i>(7275) </i></li>
        </ul>
        <div class="showmore">
            <a href="more.html"><span>显示全部品牌</span></a>
        </div>
    </div>
</body>
</html>

  • 写回答

1条回答 默认 最新

  • 小6的跟班 2022-12-15 15:58
    关注
    
    <script type="text/javascript">
    $(function(){                                   //  等待DOM加载完毕.
        var $category = $('ul li:gt(5):not(:last)');            //  获得索引值大于5的品牌集合对象(除最后一条)  
        $category.hide();                               //  隐藏上面获取到的jQuery对象。
        var $toggleBtn = $('div.showmore > a');             //  获取“显示全部品牌”按钮
        $toggleBtn.click(function(){
              if($category.is(":visible")){
                    $category.hide();                            //  隐藏$category
                    $(this).find('span')
                        .css("background","url(img/down.gif) no-repeat 0 0")      
                        .text("显示全部品牌");                  //改变背景图片和文本
                    $('ul li').removeClass("promoted");         // 去掉高亮样式
              }else{
                    $category.show();                            //  显示$category
                    $(this).find('span')
                        .css("background","url(img/up.gif) no-repeat 0 0")      
                        .text("精简显示品牌");                  //改变背景图片和文本
                    $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
                        .addClass("promoted");              //添加高亮样式
              }
            return false;                           //超链接不跳转
        })
    })
    </script>
    

    https://www.jianshu.com/p/4fd8a83a6c28

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 1月8日
  • 已采纳回答 12月31日
  • 修改了问题 12月15日
  • 创建了问题 12月15日

悬赏问题

  • ¥20 wireshark抓不到vlan
  • ¥20 关于#stm32#的问题:需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位,为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来