Question

我正在设置一个页面，通过使用jquery单击菜单项来显示/隐藏内容。在每种情况下，我也隐藏其他div。以下代码对我来说似乎很明智，但我想我错过了一些东西，因为它的工作方式不一致。有时单击菜单项会按预期工作，有时则不会。隐藏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

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

然后逻辑变为“折叠除所选项目以外的所有内容并切换所选项目”

JSFiddle：http://jsfiddle.net/dWQaL/

菜单选项如下：

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

数据项只是相关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();
    });
});

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

额外的好处是，您可以设置单击/未单击项目的样式（例如，通过在其上切换样式），同样不会重复代码，因为所有内容都通过一个功能。

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

Answer 2

这是一个好的开始，但我可能会使用$（＆＃39; div＆＃39;）。toggleClass（＆＃39; show＆＃39;）;

然后你可以写你的CSS

div {
    display:none;
}

div.show {
    display:block;
}

我会尝试为您的特定解决方案编写一个jsfiddle，但请给我一点！它应该清理它很多！如果您有其他问题或需要其他任何问题，请告诉我们。）

修改

这是一种更简洁的方法来实现我认为你拥有的东西：）

$('ul li').each(function(){ $(this).click(function(){ $('div.show').toggleClass('show'); target = '#'+$(this).data('target'); $(target).toggleClass('show'); }); });

http://jsfiddle.net/yKfaB/

使用jquery从菜单切换div

2 个答案:

JSFiddle：http://jsfiddle.net/dWQaL/

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