一次只允许一个div可见，Jquery答案

【问题标题】：Only allow one div visible at a time, Jquery一次只允许一个div可见，Jquery
【发布时间】：2011-06-16 18:02:09
【问题描述】：

全部！

I have a static menu set up, and when the menu tabs are selected, another div appears below it with related content.但是，我遇到的问题是，虽然我可以让内容显示和切换正常，但我不能让它一次只显示一个内容块。菜单只是打开了越来越多的 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>

【问题讨论】：

点击后，隐藏所有divs，然后只显示您想要的。

标签： jquery html toggle hide show

【解决方案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;
        });
    });
});

【讨论】：

【解决方案2】：

第 1 步。向所有容器 DIV 标记添加一个类，例如 class="province"

第 2 步。您只需将以下内容添加到您的点击代码中

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

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

【讨论】：