对“详细信息”标签的“摘要”部分中的复选框输入有疑问吗？

Question

我目前在一个使用detail元素填充任务列表的网站上，其名称在summary元素中以及以下说明。我还想为管理员添加批量选择要批准的任务的功能，但是我添加的复选框在外观上存在一个小问题。我希望这样做，以便在单击每个任务的摘要元素中填充的复选框时，不会导致详细信息窗口扩大。

现在基本代码如下：

<detail>
   <summary>Task Name<input type='checkbox'></summary>
   Task Instructions
</detail>

选中该复选框后，它将激活整个详细信息元素，从而扩展说明。有没有办法在不导致元素完全停止运行的情况下防止这种情况发生？

整个网站主要使用JS / JQuery，CSS和HTML，因此我有一些可用的选择。

非常感谢！

Answer 1

<details id="mydetails">
    <summary>Click here<input type="checkbox"></summary>
    <p>content</p>
</details>

如果仅选中复选框，则不应扩展整个详细信息元素。 在此处签出JSFiddle：http://jsfiddle.net/ybcarLx7/1/