jQuery产品过滤功能

Question

对于我正在创建的动态显示产品的页面，我需要创建一个排序的产品过滤器。单击 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' 项目将再次隐藏该类别.. 等等。

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

任何建议将不胜感激。

Answer 1

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

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/