0

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

基本上我想要的是在页面上有多个加号/减号图标，当单击时切换图标并根据 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

小提琴

$(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

小提琴

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

$(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>

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

4

2 回答 2

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

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

于 2013-04-17T15:20:27.477 回答
0

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

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

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

<a href="#" id="content2">
<div id="content2">
于 2013-04-17T15:24:42.373 回答