显示扩展目录（jquery）

最新推荐文章于 2022-07-28 12:36:36 发布

原创最新推荐文章于 2022-07-28 12:36:36 发布 · 329 阅读

0 ·

CC 4.0 BY-SA版权

HTML5、CSS、JavaScript 专栏收录该内容

53 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的品牌筛选与动态加载技术，通过JavaScript操作DOM元素，实现了从多个品牌中筛选并动态加载指定数量的品牌信息，同时提供了显示全部与隐藏部分品牌的交互功能。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .prompted a{color:#ff0000;}
    </style>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">

    $(function(){
      $("button").click(function(){
       alert("helloworld");
      });
    })
    $(function () {
        //1.选择从“a”->"x" 的li 标签 $category
        var $category = $("li:gt(1):not(:last)");

        //2.把他们隐藏
        $category.hide();
        //3. 为.showmore添加一个onclick响应函数
        $(".showmore").click(function () {
            if($category.is(":hidden")){
                $(".showmore>a>span").text("显示精简品牌");
                $category.show();
                $("li:contains('佳能'),li:contains('尼康')").addClass('prompted');
            }
            else
            {
                $(".showmore>a>span").text("显示全部品牌");
                $category.hide();
               //$("li:contains('佳能'),li:contains('尼康')").addClass('prompted');
                $("li").removeClass('prompted');

            }
            return false;
        })
        //4. 若$category是隐藏的

        //4.1 $category显示

        //4.2 使“尼康” 高亮显示
    })

    </script>
</head>
<body>
   
    <div class="SubCategoryBox">
        <ul>
            <li><a href="#">佳能</a><i>(3)</i></li>
            <li><a href="#">尼康</a><i>(5)</i></li>
            <li><a href="#">索尼</a><i>(6)</i></li>
            <li><a href="#">佳能1</a><i>(3)</i></li>
            <li><a href="#">尼康2</a><i>(5)</i></li>
            <li><a href="#">索尼3</a><i>(6)</i></li>
            <li><a href="#">三星</a><i>(3)</i></li>
            <li><a href="#">富士康</a><i>(5)</i></li>
            <li><a href="#">宾得</a><i>(6)</i></li>
        </ul>
    </div>
    <div class="showmore">
        <a href="#hehe.html"><span>显示全部品牌</span></a>
    </div>
</body>
</html>