對Details標記的Summary部分中的復選框輸入有疑問嗎？

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/