javascript - 使用jquery从菜单切换div

Question

我正在设置一个页面，通过使用 jquery 单击菜单项来显示/隐藏内容。在每种情况下，我还隐藏了其他 div。以下代码对我来说似乎很合理，但我想我遗漏了一些东西，因为它工作不一致。有时单击菜单项会按预期工作，而有时则不会。与隐藏 div 有关，即使它们是隐藏的？

    $(document).ready(function() { 
    $('#commercial-menu-item').click(function() {
        $('#other').toggle();
        $('#intuito').hide();
        $('#pro-bono').hide();
        $('#all').hide();
    });
    $('#other-menu-item').click(function() {
        $('#other').toggle();
        $('#commercial').hide();
        $('#pro-bono').hide();
        $('#all').hide();
    });
    $('#pro-bono-menu-item').click(function() {
        $('#pro-bono').toggle();
        $('#other').hide();
        $('#commercial').hide();
        $('#all').hide();
    });
    $('#all-menu-item').click(function() {
        $('#all').toggle();
        $('#other').hide();
        $('#pro-bono').hide();
        $('#commercial').hide();
    });
});

这是我用 jquery 完成的第一件真实的事情，所以它可能显示...

Answer 1

您最好为所有按钮(在它们上面有一个公共(public)类)编写一个单击处理程序，并从选项的 data-... 属性驱动它们的相关元素。

然后逻辑变成“折叠除所选元素之外的所有内容并切换所选元素”

JSFiddle 在这里:http://jsfiddle.net/dWQaL/

菜单选项看起来像:

<a id="pro-bono-menu-item" class="menu" data-item="#pro-bono">Pro bono</a>

其中 data-item 只是相关 div 等的选择器。菜单项上的 id 也不再需要。

代码示例如下:

$(document).ready(function () {
    $('.menu').click(function () {
        var $clicked = $(this)
        $('.menu').each(function () {
            var $menu = $(this);
            if (!$menu.is($clicked)) {
                $($menu.attr('data-item')).hide();
            }
        });
        $($clicked.attr('data-item')).toggle();
    });
});

这将为您提供更大的灵 active 。您可以轻松添加新选项，而无需更改每个按钮的代码。

一个额外的好处是，您可以为点击/未点击的元素设置样式(例如，通过切换其样式)，同样不会重复代码，因为所有内容都通过一个函数。

示例:http://jsfiddle.net/dWQaL/1/