如何防止點擊子元素觸發點擊它所在的 label？

Question

這是我正在嘗試調整的代碼。 這是一個 css 手風琴，我想將其調整為設置表單（即其中會有各種輸入類型等）：

https://codepen.io/anon847159/pen/BaQJrpq

基本上問題是，當您單擊標題以展開手風琴時，當您單擊子項時，它們中的大多數將關閉手風琴（因為 label 的標題和下拉項的高度均為 100%）。 如前所述，您可以看到，如果里面的內容是一個<a>標簽，那很好（即手風琴不會關閉，因為我猜這會阻止點擊傳播到標簽），但是點擊例如<p>標簽，一些填充或其他東西導致手風琴關閉

我已經嘗試了所有我能想到的，老實說，我只是在這里敲我的頭。 我雖然在下拉部分（ .contents ）上設置了pointer-events: none ，但似乎沒有

如果有人知道如何達到預期的結果，那么我將不勝感激:)

Answer 1

添加 preventDefault 應該可以工作。 {:onclick =>"event.preventDefault()"}

.wrapper
  %input{:id => 'pictures',:type => 'checkbox'}
  %label{:for => 'pictures'}
    %p Heading 1
    %div.lil_arrow
    .content
      %ul
        %li
          %p{:onclick =>"event.preventDefault()"} < p > Doesn't work - closes
        %li
          %a{:href => '#'} < a > Works - stays open
    %span
  %input{:id => 'jobs',:type => 'checkbox'}
  %label{:for => 'jobs'}
    %p Heading 2
    %div.lil_arrow
    .content
      %ul
        %li
          %a{:href => '#'} < a > Works - stays open
        %li
          %p < p > Doesn't work - closes
    %span