使用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做的真正的事情，所以可能有所显示...

- user2073143

---

你能分享相关的HTML吗？ - Arun P Johny

使用 http://jsfiddle.net/ 显示你的代码（将其放在那里）。 此外，也许你可以在每个导航项上添加一个“nav”类（以及它的ID）。创建一个自定义点击函数，强制所有“nav”类项隐藏，并点亮被点击/目标化的ID。 - RomoCode

你能在 jsbin 或 jsfiddle 上放一个完整的例子吗？ - Richard

当你有一个ID为#commercial的元素时，为什么在点击#commercial-menu-item时要切换＃other并隐藏＃intuito？ 你确定你的选择器没问题吗！ - adeneo

你最好为所有按钮编写一个单击处理程序（它们具有共同的类），并从选项的 data-... 属性驱动它们的相关项目。这样逻辑就变成了“折叠除所选项目外的所有内容，并切换所选项目”。 - iCollect.it Ltd

欢迎来到 Stack Overflow。请提供代码（最好在 JSFiddle 中包含 HTML 代码）。 - iCollect.it Ltd

Answer 1

你最好为所有按钮编写一个单击处理程序（它们具有共同的类），并从选项的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();
    });
});

这将使您更加灵活。您可以轻松地添加新选项而无需更改每个按钮的代码。

另一个好处是，您可以为已点击/未点击的项目设置样式（例如通过在其上切换样式），同样不需要重复编写代码，因为所有内容都通过一个函数处理。

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

- Gone Coding

---

谢谢！我在想：“可能有一种方法可以不指定每个项目来完成这个任务。” - user2073143

谢谢你的回复！我只是想知道，我们是否可以添加一个漂亮的过渡效果？ - Antonio Almeida

Answer 2

这是一个不错的开始，但我可能会使用$('div').toggleClass('show');

然后你可以编写你的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/

- 3066d0

---

只是好奇，jQuery的Show()/Hide()函数有什么问题吗？ - Nathan Koop

我喜欢使用它，因为我可以轻松地切换并查看应用的样式。这减少了内联样式的数量，并使结果更加可预测！ - 3066d0

更新即将完成，但询问者希望当前项目可以切换。这种逻辑只会打开当前选择。使用data()很好，但是它比attr('data-target')更快吗？ - iCollect.it Ltd