何も選択されていない場合は、デフォルトの状態に戻ります。

Question

2つの列を持つ結果ページがあります。LEFT COLUMNには、ユーザーが結果をフィルタリングするのに役立つ項目のリストが含まれています。 RIGHT COLUMNにはすべての結果が含まれています。

デフォルトでは、左側の列に項目が選択されていないため、右側の列に表示/フィルタ結果が表示されません。ただし、左側の列のフィルタまたは項目を使用して、結果を右側の列に表示する方法を訪問者に伝える指示がいくつかあります。

今のところ、ページに入ると結果が表示されているDIVを隠すことができ、ユーザーが左の列の項目をクリックすると指示が非表示になり、表示が開始されます結果。

私の問題は、項目が選択されていない場合、「デフォルト」状態に戻る方法がわかりません。ユーザーがすべてのフィルタをクリアすることを決定したら、指示を再度表示するにはどうすればよいですか？

これは意味がありますか？もっと説明する必要があるかどうか教えてください。

おそらく

- Live Demo here -

Answer 1

アクティブなクラスのリンクの数をチェックし、カウントが0より大きい場合は、それ以外の指示を非表示にします。

だからあなたが準備ハンドラを変更する必要があります。このjsfiddlet.netをチェック

$(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(); 

       } 
}); 

：http://www.jsfiddle.net/CDkcB/6/

Answer 2

ない、それを行うための最も効率的な方法が、基本的な考え方は、リンクがクリックされるたびに、チェックしてありますどのように多くの「アクティブ」のリンクを参照することです：

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