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){。然后，在处理函数内部，您可以获得目标div的名称 - var target_id = $(event.target).attr("targetElement")，然后直接显示/隐藏它，如下所示 - #(("#" + target_id)).show();

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

Answer 2

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

我看到你有2倍相同的身份证。这将在javascript中产生冲突：

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

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

Jquery使用Icon Toggle显示/隐藏多个Div（按ID）

2 个答案: