多次显示/隐藏带有jQuery的div

Question

我想使用jquery从文本链接中显示/隐藏DIV。

它与到目前为止我在该站点上发现的示例有所不同的地方是，我需要一种通用的方法来在一页上多次执行该操作，并且还需要在整个页面上使用它。

如果可以将JS放在页面中包含的单独文件中，那将是非常不错的，所以也许可以将其包装为一个函数？

有人可以帮我吗？ 为了使其通用，可以在其中分配一个显示/隐藏的div，其ID如id =“ toggle-hide-1”，然后更改页面中的数字以使其成为不同的显示/隐藏区域

我可以使用使函数显示/隐藏div并将其与在页面上显示/隐藏的其他div分开的名称来命名ID，我可以在其中添加数字。

下面是部分代码，将在链接单击时显示/隐藏div，但这并不是我所需要的。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" >
$(function() { 
    $(".view-code").click(function(evt) {
        $(".tool_block, .view-code").toggle();
    }); 
});
</script>
<a href="#" class="view-code" >view code</a>
<a href="#" class="view-code"  style="display:none">hide code</a> <br  />

<div class="tool_block" style="display:none" >
this stuff is hidden until we choose to show it!
</div>

Answer 1

最好的方法可能是使用自定义属性。 如果您使用指示jQuery切换哪个div的属性标记锚，则编写通用代码来完成工作将更加容易。

像这样：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" >
$(function() { 
    $(".view-code").click(function(evt) {
        var d = $(this).attr("toolDiv");
        $(".tool_block[toolDiv=" + d + "], .view-code[toolDiv=" + d + "]").toggle();
    }); 
});
</script>
<a href="#" class="view-code" toolDiv="1" >view code</a>
<a href="#" class="view-code" toolDiv="1" style="display:none">hide code</a> <br  />

<div class="tool_block" toolDiv="1" style="display:none" >
this stuff is hidden until we choose to show it!
</div>

然后为每个锚点-div对赋予唯一的toolDiv值（不必为数字）。

Answer 2

如果您可以将整个集合包装在div中，则将非常容易。

$(function() {
    $(".view-code").click( function(e) {
        $(this).siblings().andSelf().toggle();
    });
});

<div>
    <a href="#" class="view-code" >view code</a>
    <a href="#" class="view-code"  style="display:none">hide code</a> <br  />

    <div class="tool_block" style="display:none" >
    this stuff is hidden until we choose to show it!
    </div>
</div>

如果它不处理<br /> ，则可以将同级过滤为仅div和anchor元素。

Answer 3

为什么不使用特定的类呢？ 您要显示/隐藏的每个元素都可以有一个名为“ toggler”的类，如下所示：

<div class="toggler">
 ...
</div>

然后，您可以使用以下类立即切换所有元素的可见性：

$(".toggler").toggle();

在这种情况下，这些元素在文档中的位置甚至是什么类型都没有影响。

如果此功能需要全局可用，则始终可以使用自定义功能扩展jQuery本身，如下所示：

$.toggleTogglers = function(toggleClass) {
  $("." + toggleClass).toggle();
};

这样做的好处是，您可以灵活地选择自己设计的切换自定义类。