jquery - 如何使显示/隐藏更加简洁？

Question

有很多显示/隐藏问题和示例，但我找不到答案。

我有一个像这样的简单代码，它在页面内的几个区域中使用。

jQuery(document).ready(function () {
    jQuery('#mini-cart').hide(); 
    jQuery('#mini-cart-a').click(function ()  { 
        jQuery('#mini-cart').toggle(400);  
        return false; 
    }); 
});

每个显示/隐藏都使用自己的 ID，所以我只是像这样对 id 进行分组:

jQuery('#show-hide1, #show-hide2').hide();

此方法的问题是，当我单击显示/隐藏元素时，所有元素都会显示。

所以我尝试了类似的方法，但只有第一个有效，第二个无效，当我点击它时，它什么也没做。

jQuery(document).ready(function () {
    jQuery('show-hide1, #show-hide2').hide();
    jQuery('show-hide1 a, #show-hide2 a').click(function () {
        jQuery(this).next().toogle(400);
    }
    return false;
    });
});

我需要在页面内显示/隐藏 4 个不同的区域，并且真的不想重复相同的代码 4 次。谢谢!

更新: (抱歉，我无法使用“添加评论”也无法回答我的问题)

谢谢大家的有用回复。

Lee 的版本更像是一个选项卡 - 我不希望隐藏的 div 将 ID 与 anchor 标记相关联。这是 CMS 环境，因此我会尽可能使其变得更简单。

Andy 的版本也有类似的 ID 问题，所以我选择了 roXon 的

罗克森: http://jsbin.com/ihoqi3/2/ 单击“查看包”(2)，您可以看到它正在运行，但是如果您转到“问题”选项卡，单击“提出问题”，它将打开“查看包”中的隐藏容器。

杰里米 B 的版本: http://jsbin.com/ibayu4 它隐藏了切换链接的文本。

从示例页面来看，评论选项卡中的“选择你的茶”和“写评论”需要类似的处理，但如果我能让上述两个工作正常，其余的就会自行处理:)

现在我使用 4 个独立的代码来使其工作。

Answer 1

举了一个小例子来说明如何做到这一点:http://jsfiddle.net/ytx2J/

HTML:

<a href="#" class="toggleLink" data-id="1">1</a> 
<a href="#" class="toggleLink" data-id="2">2</a> 
<a href="#" class="toggleLink" data-id="3">3</a>
<a href="#" class="toggleLink" data-id="4">4</a>

<div id="show-hide1">div 1</div>
<div id="show-hide2">div 2</div>
<div id="show-hide3">div 3</div>
<div id="show-hide4">div 4</div>

JS:

$(function(){
    $('.toggleLink').click(function(ev){
       $('#show-hide'+$(this).data('id')).toggle(400); 
       ev.preventDefault();
    });
});