只允许一次显示一个div，jquery

Question

all！

我有一个静态菜单设置，当菜单选项卡被选中时，另一个div下面出现与相关的内容。然而，我遇到的问题是，虽然我可以让内容显示并切换正常，但我无法一次只显示一个内容块。菜单只是打开越来越多的div。

我想要做的就是让这个菜单只允许div一次打开。 :(

任何帮助，非常感谢！非常感谢你，我觉得我已经对现在固定这一段时间的边缘，但不能完全到达那里。:(

jQuery的

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

HTML

<li><a href="" id="BC-show" class="prov">BC</a></li> 
<li><a href="" id="AB-show" class="prov">AB</a></li> 

<div class='clearfix' id='BC' style="padding-bottom:5px;"><br /> 
       <ul> 
        <span>British Columbia</span> 
        <li style="padding-left:22px;"><a href="/Vancouver">Vancouver</a></li> 
       </ul> 
      </div> 
      <div class='clearfix' id='AB'><br /> 
       <ul> 
        <span>Alberta</span> 
        <li style="padding-left:22px;"><a href="/Calgary" class="links">Calgary</a></li> 
       </ul> 
      </div> 

Answer 1

在给定的代码，你可以试试这个：

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

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

}); 

工作例如：http://jsfiddle.net/WGRvw/

但是，可以使处理更通用给出如下：

$(function(){ 
    $(document).ready(function() { 
     $('.clearfix').hide(); 
     $(".prov").click(function(){ 
      var tgtId = this.id.replace("-show"); 
      $(".clearfix").hide(); 
      $("#" + tgtId).toggle('slow'); 
      return false; 
     }); 
    }); 
}); 

Answer 2

第1步：一类添加到您的所有容器DIV标签，像类=”省”

第2步：您只需添加以下到您的点击代码

$(".province").click(function() { });

$('#BC-show').click(function() { 
    // ---- HIDE ALL OTHER DIVS ----   
    $(".province").hide(); 
    // ---- END HIDE ---- 
    $('#BC').toggle('slow'); 
    return false; 
});