Question

所有！

我设置了静态菜单，当选择了菜单选项卡时，其下方会显示另一个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标记中添加一个类，类似于class =“province”

步骤2.您只需将以下内容添加到您的点击代码

即可

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

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

只允许一次看到一个div，Jquery

2 个答案: