Question

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

与我到目前为止找到的这个网站的例子有什么不同，我需要一种通用的方式在1页上多次这样做，并且能够在任何页面上在全网站上使用它。

如果我可以将JS放在页面中包含的单独文件中，那将是非常好的，所以它可能被包装到一个函数中？

有人可以帮助我吗？为了使它成为通用的，我可以在这里指定一个显示/隐藏的div，其ID为 id =“toggle-hide-1”，只需更改页面中的数字即可使其变得不同显示/隐藏区域

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

下面是部分代码，它会在链接点击上显示/隐藏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>

然后给每个anchor-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();
};

这很好，因为您可以灵活地选择自己设计的切换自定义类。

用jquery多次显示/隐藏div

3 个答案: