Jquery 使用图标切换显示/隐藏多个 div（按 ID）

Question

我正在尝试让一些 jQuery 工作，并且我知道（好吧，想想）根据我在 this question 中找到的信息，我已经接近解决方案。

基本上我想要的是在一个页面上有多个加号/减号图标，当单击该图标时，它会切换图标并根据 ID 值显示特定的 DIV。

看下面的这个例子，DIV 中的内容将被隐藏，直到图标被点击。单击后，加号图标将变为减号图标。如果单击减号图标，则内容将再次隐藏。应该允许同时显示多个 DIV，因此几乎每个切换都应该是独立的。

[...如果有一个“显示/隐藏所有”链接会很棒！]

<div><a href="#" id="content1">[Plus Icon]</a> Content Title</div>
<div id="content1">This is some content. Really exciting content!</div>

<div><a href="#" id="content2">[Plus Icon]</a> Different Content</div>
<div id="content2">Here is more content. This content is less exciting.</div>

注意：在我上面的示例中，显示的 div 位于链接的正下方，但并非总是如此。有时切换链接位于不同的位置。

如您所见，我希望能够在切换链接中指定一个 ID，该 ID 对应于要隐藏的 DIV。

而且，如果显示/隐藏可以通过滑动效果进行动画处理，那就太好了。

我发现的另一个问题中的两个脚本几乎可以满足我的需求，只是它们只与一个 DIV 相关并且没有我所描述的 ID 类型系统。

脚本出处：Vytautas Butkus

Fiddle

$(document).ready(function(){


  $(".slidingDiv").hide();

    $('.show_hide').click(function(){
        $(".slidingDiv").slideToggle();
      var isShow = $(this).text() == 'Show';
      $(this).text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:0) +'px'});
    });

});

.show_hide{
  background:url(http://img37.imageshack.us/img37/1127/plusminus.png) no-repeat;
  padding-left:20px;  
}

<a href="#" class="show_hide">Show</a>

<div class="slidingDiv" style="display: block;">
Check out
</div>

脚本来源：roXon

Fiddle

注意：他的脚本也会切换文本，我并不真正想要。

$(document).ready(function(){


  $(".slidingDiv").hide();

    $('.show_hide').click(function(){
        $(".slidingDiv").slideToggle();
      var isShow = $(this).text() == 'Show';
      $(this).text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:0) +'px'});
    });

});

.show_hide{
  background:url(http://img37.imageshack.us/img37/1127/plusminus.png) no-repeat;
  padding-left:20px;  
}

<a href="#" class="show_hide">Show</a>

<div class="slidingDiv" style="display: block;">
Check out
</div>

非常感谢您的帮助！一如既往，非常感谢！

Answer 1

如果我理解正确，您正在寻找的是一种指定特定 div 以显示/隐藏给定按钮的方法。根据您构建要显示和隐藏的 div 的方式，此操作的实现可能会有所不同，但这是一种可能的解决方案。

在显示/隐藏按钮上，添加一个属性。不管它是什么，我可以称它为targetElement 之类的。所以你最终会得到<a targetElement="content1" href="#" id="content1">[Plus Icon]</a>。

然后在将 click 事件处理程序附加到此元素时，传入事件。所以像这样 - ('.show_hide').click(function(event){。然后，在handler函数里面，可以像这样获取目标div的名字——var target_id = $(event.target).attr("targetElement")，然后直接显示/隐藏，像这样——#(("#" + target_id)).show();

同样，根据您的确切设置和实施，您具体如何处理可能会有所不同 - 这是一个非常具体的问题 - 但希望这个解决方案能够奏效，或者至少通过提供传递示例为您指明正确的方向数据到事件处理程序中。

Answer 2

我想在评论中这样说，但我还没有得到代表。

我看到你有 2 次相同的 id。这将在 javascript 中产生冲突：

<a href="#" id="content1">
<div id="content1">

<a href="#" id="content2">
<div id="content2">