hide/show toggle div

Question

請幫忙！我一直在試圖弄清楚如何在已經打開的時候關閉一個特定的DIV。

例如，請查看：http://jsfiddle.net/WGRvw/

如果我點擊BC 的DIV應該會出現，但如果我再次點擊它時，DIV應該會消失，但我無法弄清楚如何讓它消失。另外，我只希望一次出現一個DIV。

我試着做一個else：

  $(function(){ 
      $(document).ready(function() { 
       $(".prov").click(function(){ 
        $(".clearfix").hide(); 
       }); 

   $('#BC').hide(); 
       $('#BC-show').click(function() { 
        if($('#BC').toggle('slow')) { 
         return false; 

        } 
        else { 
         $('#BC').hide(); 
        } 
       }); 
       $('#AB').hide(); 
       $('#AB-show').click(function() { 
        if($('#AB').toggle('slow')) { 
         return false; 

        } 
        else { 
         $('#AB').hide(); 
        } 
       }); 
       }); 
      }); 

    }); 

您的幫助表示讚賞。

謝謝！

Answer 1

您似乎將兩個事件附加到每個元素。

一個使用的className 另一個使用ID

試試這個代碼

$(function() { 
    $(document).ready(function() { 
     $('#BC, #AB').hide(); 

     $(".prov").click(function() { 
      var id = $(this).attr('id').split('-')[0]; 
      $('.clearfix').not('#'+id).hide(); 
      $('#' + id).toggle('slow'); 
      return false; 
     }); 
    }); 
});​ 

Check Fiddle

只是用類附加的事件，並從中獲得ID和用它來切換。

Answer 2

我看起來你的第一個事件處理程序隱藏了該元素，然後切換被調用。因此，切換顯示該元素，因爲$(".prov").click(function(){ $(".clearfix").hide(); });正在隱藏它。

Answer 3

如果單擊顯示鏈接會發生什麼情況是，得到的div隱藏和比你調用切換，基本上再每次顯示的格。因此，預期的效果不顯示。 這麼這麼走了以下工作：

更新：

  $(document).ready(function() { 

       $('#BC, #AB').hide(); 
       $('#BC-show').click(function() { 
        $('.clearfix:visible').not('#BC').hide() 
         $('#BC').toggle('slow'); 
         return false; 
       }); 
       $('#AB-show').click(function() { 
        $('.clearfix:visible').not('#AB').hide() 
         $('#AB').toggle('slow'); 
         return false; 
       }); 
      }); 

Answer 4

$(function() { 
    $('#BC, #AB').hide(); 

    $('.prov').click(function() { 
     $('#'+this.id.replace('-show','')).toggle('slow').siblings('div').hide('slow'); 
     return false; 
    }); 
}); 

FIDDLE

有沒有需要兩個DOM準備功能，並綁定到類的第一個函數隱藏元素，綁定到ID的第二個函數切換元素，這些元素現在當然是隱藏的，並且將始終顯示。