javascript - 对Details标记的Summary部分中的复选框输入有疑问吗？

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

现在，基本代码如下所示：

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

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

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

非常感激！！

最佳答案

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

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

关于javascript - 对Details标记的Summary部分中的复选框输入有疑问吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54522771/