Question

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

我有一个像这样的简单代码，用于页面的一些区域。

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

每个show / hide都使用自己的ID，因此我只需将ID分组为：

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

这个方法的问题是，当我点击show / hid元素时，所有元素都会显示出来。

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

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次。谢谢！

更新（对不起，我不能使用添加评论也不能回答我的问题）

谢谢大家，感谢您的回复。

李的版本更像是一个标签 - 我不希望隐藏的div关联ID到锚标签。这是CMS的环境，所以如果可能的话，我会尽量简化它。

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

罗克森： http://jsbin.com/ihoqi3/2/ 点击View Bag（2），你可以看到它正常工作，但是如果你去问题'标签，点击“提问”，它会从View Bag中打开隐藏的容器。

Jeremy B的版本： http://jsbin.com/ibayu4 它隐藏了toggleLink的文本。

在示例页面中，评论标签中的“选择你的茶”和“写评论”需要类似的处理，但是如果我能让上面提到的两个工作，其余的将自己照顾：）

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

p / s，我需要使用herf锚点，因为这对键盘用户很重要，JS显示/隐藏隐藏的div无法切换。

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();
    });
});

Answer 2

首先给每个区域指定同一个类。

jQuery('.hider').click(function() {
    jQuery(this).toggle(400);
    return false;
});

这将导致您单击的“hider”切换。每个人都将独立工作。

Answer 3

和Andy一样但略有不同，允许不同的ID结构

HTML

<a href="#div1" class="toggleLink">1</a> 
<a href="#div2" class="toggleLink">2</a> 
<a href="#div3" class="toggleLink">3</a>
<a href="#div4" class="toggleLink">4</a>

<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>
<div id="div4">div 4</div>

JS

$(function(){
    $('.toggleLink').click(function(ev){
       $($(this).attr('href')).toggle(400); 
       ev.preventDefault();
    });
});

JSFiddle

的示例

Answer 4

和安迪一样，但略有不同，允许删除身份证，因为没有必要我们可以保持简单吗？

jsFiddle demo

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

<div class="show-hide">div 1</div>
<div class="show-hide">div 2</div>
<div class="show-hide">div 3</div>
<div class="show-hide">div 4</div>

$('.toggleLink').click(function(){
    $('.show-hide:eq('+ $(this).index() +')').toggle(400);
});

将index锚点指向:eq()元素是一个很好的组合 - ＆gt;两者都是'0'。

Answer 5

指定一个类，例如“.tab”和div的id，其中包含要为特定“.tab”显示的内容即。

$(".tab").click(function(){
   var clickedID = $(this).attr("class").split(" ")[1];
   $("#" + clickedID).toggle();
});

<div class="tab container1"></div>
<div id="container1">This container will be displayed if you click on the div .tab container 1</div>

<div class="tab container2"></div>
<div id="container2">This container will be displayed if you click on the div .tab container 2</div>

怎么让这个显示/隐藏更简洁？

5 个答案:

HTML

JS

jsFiddle demo