现在这个 jquery 工作得很好:
:javascript
$( "#catExpander1" ).click(function() {
$( "#category1" ).toggle( "fast", function() {
});
});
但是它当然有一个大问题:它不能被重用来显示/隐藏其他div。如何用变量替换硬编码的 id?
上下文:
我目前在 Rails 应用程序中使用它来显示/隐藏其父类别下的子类别,这些子类别都位于侧栏类别导航列表内。目前我能想到的唯一方法是为每个类别和子类别创建一个单独的 jquery block ,但当然这是一种可怕的方法,因为它需要大量重复,不可重用等。
最佳答案
如果您想聪明一点,请使用许多现有的可折叠库之一。 Bootstrap has a good one .
如果您真的想推出自己的解决方案......
通常,您可以通过按钮的 href
(假设它是链接)或 data-
属性将相关 DOM 节点链接在一起。 DOM 本身传达元素之间的关系非常重要,这不仅是为了文档的语义完整性,也是因为它是用最少的 JavaScript 实现此目的的最佳方式。
然后,您可以编写一个通用点击处理程序,它知道根据单击的元素显示/隐藏哪个元素。
最后,所有扩展按钮都会被赋予一个类,例如 expandable
,然后您可以使用该类将所有按钮与单个 $('.expandable' 绑定(bind)).click
调用,或者通过单个 on
调用(如果它们将动态添加到 DOM)。
结果看起来像这样:
<a href="#category1" class="expandable">Expand Category 1!</a>
<div id="category1">
Item 1
Item 2
</div>
还有...
$(".expandable").click(function(e) {
e.preventDefault();
$($(this).attr('href')).toggle( "fast" );
});
关于javascript - jquery 显示/隐藏 block 中的 Ruby 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20245346/