我有这个可排序的手风琴,标题中有一个表格。该表很简单:2 行和 3 列,中间列跨越两行,因此总共有 5 个元素。
在中心元素中,我使用了一个输入元素:
<div id="accordion"
data-bind="jqAccordion: { },template: { name: 'task-template', foreach: ¨Tasks, afterAdd: function(elem){$(elem).trigger('valueChanged');} }">
</div>
<script type="text/html" id="task-template">
<div data-bind="attr: {'id': 'Task' + TaskId}, click: $root.SelectedTask" class="group">
<div class="accordion-header">
<table class="myAccordionHeader" >
<tbody>
<tr>
<td class="left-upper" >
<label for="SequenceNo">Seq:</label>
<span data-bind="text: SequenceNo"></span>
</td>
<td class="center" rowspan="2" >
<h3><b><input name="TaskName" data-bind="value: TaskName" /></b></h3>
</td>
<td class="right-upper" colspan="2">
Due: <span data-bind="text: DueDate"></span>
</td>
</tr>
<tr>
<td class="left-bottom">
Id: <span data-bind="text: TaskId" ></span>
</td>
<td class="right-bottom">
Status: <span data-bind="text: TaskStatus"></span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="myAccordionContent">
<!-- Contents here... -->
</div>
</div>
</script>
在标题中引入表格后,我可以抓住手风琴标题的唯一位置是输入元素边距,并且在第三列开始之前到它的一侧。
我认为这与表数据元素(<td>
s)上的一些基本事件有关。其他<td>
s 填充了文本和<span>
元素,这些元素与剔除变量数据绑定。
关于如何扩大手风琴的“可抓取”区域的任何线索?