javascript - jquery 显示/隐藏 block 中的 Ruby 变量

Question

现在这个 jquery 工作得很好:

:javascript
    $( "#catExpander1" ).click(function() {
      $( "#category1" ).toggle( "fast", function() {
      });
    });

但是它当然有一个大问题:它不能被重用来显示/隐藏其他div。如何用变量替换硬编码的 id？

上下文:
我目前在 Rails 应用程序中使用它来显示/隐藏其父类别下的子类别，这些子类别都位于侧栏类别导航列表内。目前我能想到的唯一方法是为每个类别和子类别创建一个单独的 jquery block ，但当然这是一种可怕的方法，因为它需要大量重复，不可重用等。

Answer 1

如果您想聪明一点，请使用许多现有的可折叠库之一。 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" );
});