我們是否可以在一個 div 中顯示/隱藏不同的內容，而無需使用 Select 方法，而只需單擊滑鼠即可？

Question

是否可以在一個 div 中顯示/隱藏不同的內容，而無需使用 Select 方法，而只需在 div 上按一下滑鼠即可？

例如：

.inv{
  display: none;
}

<div class="inv">
 
  <div> Option 1 </div>
  <div> Option 2 </div>
  <div> Option 3 </div>
 
  <div class="inv">Content 1</div>
  <div class="inv">Content 2</div>
  <div class="inv">Content 3</div>

</div>

如果我點擊「Option 1」div，它會顯示「Content 1」中的所有內容

選項1 -> 內容1

可能嗎？

Answer 1

要嚴格不使用 JavaScript 來完成此操作，您可以使用帶有標籤的複選框，但您必須修改標記：

.inv {
  display: none;
}

label{
  display: block;
}

input {
  display: none;
}

input:checked + .inv{
  display: block !important;
}

 Option 1 
 Option 2 
 Option 3 


Content 1

Content 2

Content 3

如果你不想對目前標記進行太多更改，則必須使用 JS。以下範例使用資料屬性來標識元素切換。

$('div[data-for]').click(function() {
  $(`.inv[data-id="${this.dataset.for}"]`).toggle()
})

.inv {
  display: none;
}

sssccc
 Option 1 
 Option 2 
 Option 3 

Content 1
Content 2
Content 3