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的第二个函数切换元素，这些元素现在当然是隐藏的，并且将始终显示。