0

对于我正在创建的动态显示产品的页面,我需要创建一个排序的产品过滤器。单击 ul#product-filter 中的 li 元素将显示/隐藏相应的 div(产品类别)。

查看我的 HTML 代码:

<ul id="product-filter">
    <li class="cat_1">category 1</li>
    <li class="cat_2">category 2</li>
</ul>

<div id="product-display">
    <div class="cat_1">
        <img src="image1.gif">
    </div>

    <div class="cat_2">
        <img src="image2.gif">
    </div>
</div>

目前我的 jQuery 解决方案是:

$('#products-filter li[class^=cat_]').click(function() {
    $('#products-display div[class=' + $(this).attr('class') + ']').fadeToggle();
});

但是,这只会淡化切换所选类别(产品类别 div)。客户已请求单击初始类别 ('li') 将隐藏所有其他“产品类别” div 并仅显示所选内容。单击另一个('li')类别也将显示第二个产品 div,仍显示先前选择的.. 等等。重新单击相同的 'li' 项目将再次隐藏类别.. 等等。

“重置”按钮也是理想的选择。

任何建议将不胜感激。

4

1 回答 1

0

我认为这实现了第一次点击的“客户端请求行为”只显示点击的项目,随后的点击只是切换点击的项目(让其他项目保持原样):

var clickOnce = false;
$('#product-filter li').click(function() {
    if (!clickOnce) {
        $('#product-display > div').hide();
        $('#product-display .' + this.className).show();
        clickOnce = true;
    } else {
        $('#product-display .' + this.className).toggle();
    }
});​

工作演示:http: //jsfiddle.net/jfriend00/KHeVp/

要仅显示单击的内容并隐藏所有其他内容(更传统的行为),您可以使用以下命令:

$('#product-filter li').click(function() {
    $('#product-display > div').hide();
    $('#product-display .' + this.className).show();
});​

工作演示:http: //jsfiddle.net/jfriend00/Tcjam/

或者用动画:

$('#product-filter li').click(function() {
    $('#product-display > div:visible').slideUp();
    $('#product-display .' + this.className).stop(true).slideDown();
});​

工作演示:http: //jsfiddle.net/jfriend00/ZThzA/

于 2012-09-11T20:29:03.070 回答