jQuery-品牌列表案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>品牌列表</title>
    <link rel="stylesheet" type="text/css" href="css/index1.css">
    <script type="text/javascript" src="scripts/jquery-1.12.0.js"></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>(32222)</i></li>
            <li><a href="#">卡西欧</a><i>(30240)</i></li>
            <li><a href="#">富士</a><i>(30449)</i></li>
            <li><a href="#">柯达</a><i>5440)</i></li>
            <li><a href="#">宾得</a><i>(12340)</i></li>
            <li><a href="#">理光</a><i>(56740)</i></li>
            <li><a href="#">奥林巴斯</a><i>(37440)</i></li>
            <li><a href="#">明基</a><i>(30453)</i></li>
            <li><a href="#">爱国者</a><i>(304760)</i></li>
            <li><a href="#">其他品牌相机</a><i>(32440)</i></li>
        </ul>
        <div class="showmore">
            <a href="#"><span>显示全部品牌</span></a>
        </div>
    </div>
    
    <script type="text/javascript" src="js/index1.js"></script>
</body>
</html>

.SubCategoryBox{
        width: 600px;
        height: 300px;
        border: 1px solid;
        float: left;
        margin-left: 300px;
        margin-top: 100px;
}

.SubCategoryBox ul li{
    display: inline-block;
    float: left;
    width: 160px;
    height: 20px;
    margin-right: 10px;
    text-align: center;
}
.SubCategoryBox ul li a{
    text-decoration: none;
    color: black;
}
.showmore{
    clear: both;
    display: block;
    float: left;
    margin-left: 260px;
    margin-top: 30px;
}
.showmore a{
    border: 1px solid #464646;
    text-decoration: none;
}
.promoted{
    color: red;
}

//第一种方法
$(function(){
    var $category = $('ul li:gt(5):not(:last)');

    $category.hide();
    var $toggleBtn = $('div .showmore > a');
    $toggleBtn.click(function(){
        if($category.is(":visible")){
            $category.hide();
            $(this).find('span').text("显示全部品牌");
            $('ul li').removeClass("promoted");
        }else{
            $category.show();
            $(this).find('span').text("精简显示品牌");
            $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass("promoted");
        }
        return false
    })
})

//第二种方法，使用jQuery自身存在的方法，能够给一个按钮添加一组交互事件，存在错误
var $category = $('ul li:gt(5):not(:last)');
$category.hide();
var $toggleBtn = $('div .showmore > a');
$toggleBtn.toggle(function(){
    $category.hide();
    $(this).find('span').text("显示全部品牌");
    $('ul li').removeClass("promoted");
},function(){
     $category.show();
    $(this).find('span').text("精简显示品牌");
    $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass("promoted");
})

posted @ 2016-02-06 20:44 ^^-^^- 阅读(307) 评论(0) 编辑收藏举报

zhanghuiyun

jQuery-品牌列表案例

公告