Question

我有一个包含2列的结果页面：LEFT COLUMN包含帮助用户过滤其结果的项目列表。右列包含所有结果。

默认情况下，左栏中没有选择任何项目，因此，右栏上没有显示/过滤的结果。但是，有一些说明告诉访问者如何使用左栏中的过滤器或项目在右栏中查看其结果。

截至目前，我能够在显示指令时隐藏包含结果的DIV，并且一旦用户点击左栏中的项目，然后隐藏说明并开始显示结果

我的问题是，如果没有选择任何项目，我不知道如何回到'默认'状态。一旦用户决定清除所有过滤器，我该如何再次显示说明？

这有意义吗？如果您需要我解释更多，请告诉我。

Answer 1

可能不是最有效的方法，但基本的想法是，每次点击链接时，检查并查看有多少“活动”链接：

$('.acitem a').click(function(){
    $(this).toggleClass('active');
    if ($('.acitem .active').length) {
        $('#instructions').fadeOut();
        $('#results').fadeIn();
    } else {
        $('#results').fadeOut();
        $('#instructions').fadeIn();
    }
});

Answer 2

检查具有活动类的链接数，如果计数大于0，则隐藏其他显示的指令。

因此您需要将就绪处理程序更改为：

$(function(){
    //
    $('#results').hide();

    //Buttons inside accordions
    $('.acitem a').click(function(){
        $(this).toggleClass('active');
                if($('.acitem a.active').length > 0){
                    $('#instructions').hide();
                    $('#results').fadeIn();
                }
                else{
                    $('#instructions').show();
                    $('#results').hide();

                }
});

检查此jsfiddlet.net：http://www.jsfiddle.net/CDkcB/6/

如果未选择任何内容，则返回默认状态

2 个答案: