<ol id="root" class="sortable">
<li>
<header class="show-after-collapse">Top-Line Info</header>
<section class="hide-after-collapse">
<ol class="sortable-connected">
<li>
<header class="show-after-collapse">Top-Line Info</header>
<section class="hide-after-collapse">
<div>Content A</div>
</section>
</li>
</ol>
</section>
</li>
<li>
<header/>
<section class="hide-after-collapse">
<ol class="sortable-connected">
<li>
<header/>
<section class="hide-after-collapse">
<div>Content B</div>
</section>
</li>
</ol>
</section>
</li>
</ol>
也就是说,嵌套可排序列表。Sortable插件就足够了,因为每个li元素(以下称为“项目”)都保持其级别,尽管内部列表是连通的。项目具有始终可见的标题以及在展开状态下可见的部分,可以通过点击标题进行切换。用户可以随意添加和删除任何级别的项目;添加一个顶层项目将在其中包含一个空的嵌套列表。我的问题与JS初始化新创建的项目有关:虽然它们将共享一些公共功能,但我可以通过使用
$("#root").on("click", "li > header", function() {
$(this).parent().toggleClass("collapsed");
});
并且
li.collapsed section {
display: none;
}
(附带问题:这是否是使用details/summary HTML5标签的适当位置?似乎不确定那些标签是否会被纳入最终规范中,而且我想要一个滑动转换,所以似乎我仍需要JS。但我向大众提出问题。你好,大众。)
如果根列表是在页面加载时唯一存在的(相关)元素,为了让.on()有效地工作,我必须将所有事件都绑定到该元素,并为每个事件明确指定选择器,据我所知。所以,例如,要将单独的函数绑定到两个紧挨着的按钮上,我必须每次都完整地拼写出选择器,像这样:
$("#root").on("change", "li > section button.b1", function() {
b1Function();
}).on("change", "li > section button.b2", function() {
b2Function();
});
这是否准确?如果是这样,那么放弃使用 .on() 并在新项目添加到页面时绑定事件更有意义吗?总项目数最多可能只有几十个,如果这会影响响应,请告诉我。
button.b2
中,这种元素只有一个还是可能有几十个? - James Montagne