用jquery显示/隐藏div多次

问题描述：

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

是什么让它有点不同于我发现的这个网站到目前为止的例子是我需要一个通用的方式做多次在1页，也能够在任何页面上使用它的网站。

如果我可以把JS放在包含在页面中的单独文件中，那真的很不错，所以也许它可以被包装成一个函数？

有人可以帮我吗？为了使它具有通用性，我可以在其中指定一个显示/隐藏的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>

答

最好的方法可能是使用自定义属性。如果你使用一个属性告诉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值（不必是一个数字）。

这正是我所需要的！ 1点是当你点击一个链接将＃加载到URL中时，你知道如何取消该部分，因为如果你向下滚动页面，页面会变成最顶层。谢谢 – JasonDavis 2009-09-05 20:58:54

另一件事，你知道是否可以将这个函数包装到一个函数中，我可以把它放在其他地方的文件中，然后在页面上用一个班轮调用它，我需要它？ – JasonDavis 2009-09-05 21:00:20

您可以将该脚本块的内容粘贴到另一个文件中，只要它在jquery库之后加载，它就可以在任何页面上正常工作。不需要直接在页面上写任何JS。为了防止锚点的默认行为，只需将'return false;'添加到点击处理程序的末尾。 – Joel 2009-09-05 21:05:08

答

如果你可以换一个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和div在标记中有些相关。 – Joel 2009-09-05 20:39:41

只有他们在同一个容器中，但听起来就像他在做什么。 – tvanfosson 2009-09-05 20:40:35

我认为这是一个优雅的解决方案，如果你所做的假设对于OP是真的。 – Joel 2009-09-05 21:14:55

答

为什么不使用特定的类呢？你想显示的每个元素/隐藏可以有一个名为“toggler，”类中：

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

然后，您可以立刻切换这一类的所有元素的可见性，具有：

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

在这种情况下，它们在文档中这些元素所处的位置甚至是什么类型的元素都没有区别。

如果此功能需要在全球范围内提供，你可以随时扩展jQuery的本身具有自定义功能，如：

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

这是那该多好你必须灵活地选择一个切换自定义类的你自己的设计。

用jquery显示/隐藏div多次

相关推荐