Javascript 多次使用jquery显示/隐藏div

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

它与我目前为止发现的这个网站的例子有一点不同的是，我需要一种通用的方法，在一个页面上多次使用它，并且能够在任何页面上使用它

如果我能把JS放在包含在页面中的单独文件中，那就太好了，所以也许它可以包装成一个函数

有人能帮我吗？为了使其通用，我可以在其中指定一个div，该div使用类似id=“toggle-hide-1”的id显示/隐藏，并只需更改页面中的数字，使其成为不同的显示/隐藏区域

我可以使用一个名称来命名ID，这个名称将使函数show/hide一个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>

$（函数（）{
$（“.view code”）。单击（函数（evt）{
$（“.tool_block，.view code”）.toggle（）；
}); 
});


这东西是隐藏的，直到我们选择显示它！

如果您可以将整个集合包装在一个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>

$（函数（）{
$（“.view code”）。单击（函数（e）{
$（this.this（）.andSelf（）.toggle（）；
});
});


这东西是隐藏的，直到我们选择显示它！

---

如果它不处理

，您可以只将同级筛选为div和锚元素。

如果您可以将整个集合包装在一个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>

$（函数（）{
$（“.view code”）。单击（函数（e）{
$（this.this（）.andSelf（）.toggle（）；
});
});


这东西是隐藏的，直到我们选择显示它！

---

如果它不处理

，您可以只将同级筛选为div和anchor元素。

最好的方法可能是使用自定义属性。如果您使用一个属性标记锚点，告诉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>

$（函数（）{
$（“.view code”）。单击（函数（evt）{
var d=$（this.attr（“toolDiv”）；
$（“.tool_块[toolDiv=“+d+”]，.view代码[toolDiv=“+d+”]）。toggle（）；
}); 
});


这东西是隐藏的，直到我们选择显示它！

---

然后为每个锚定div对指定一个唯一的toolDiv值（不必是数字）。

最好的方法可能是使用自定义属性。如果您使用一个属性标记锚点，告诉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>

$（函数（）{
$（“.view code”）。单击（函数（evt）{
var d=$（this.attr（“toolDiv”）；
$（“.tool_块[toolDiv=“+d+”]，.view代码[toolDiv=“+d+”]）。toggle（）；
}); 
});


这东西是隐藏的，直到我们选择显示它！

---

然后为每个锚定div对指定一个唯一的toolDiv值（不必是数字）。

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

在这个场景中，这些元素在文档中的位置，甚至是它们是什么类型的元素都没有区别

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

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

---

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

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

在这个场景中，这些元素在文档中的位置，甚至是它们是什么类型的元素都没有区别

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

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

---

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

这确实需要锚和div在标记中有一定的关联。只是它们在同一个容器中，但听起来这正是他想要的。我确实认为这是一个优雅的解决方案，如果你对OP的假设是正确的，唯一的问题是它不允许我有多个集合。这将允许多个div使用一次单击事件，但不允许使用多组单击事件来改变不同的div，如joelpotteranswer@jasondavis我不明白你的意思。这将对用“视图代码”类修饰的每个元素（在本例中为锚点）应用一个处理程序。每个单击处理程序将仅应用于容器中的元素，其中包含应用该处理程序的元素。您可以拥有任意数量的anchor/anchor/div元组，只要它们被包装在一个div中，这样您就可以使用兄弟姐妹（）方法只选择与单击的元素关联的div和锚。这确实要求锚和div在标记中有一定的关联。只是它们在同一个容器中，但听起来这就是他想要的。我确实认为这是一个优雅的解决方案，如果你对OP的假设是正确的，唯一的问题是它不允许我有多个集合。这将允许多个div使用一次单击事件，但不允许使用多组单击事件来改变不同的div，如joelpotteranswer@jasondavis我不明白你的意思。这将对用“视图代码”类修饰的每个元素（在本例中为锚点）应用一个处理程序。每个单击处理程序将仅应用于容器中的元素，其中包含应用该处理程序的元素。您可以拥有任意多组锚点/锚点/div元组，只要