點擊展開詳細信息和摘要標記

Question

我正在使用點擊展開摺疊使用<details>和<summary>標籤。 它可以膨脹和崩潰沒有問題。 我只想擴展一個信息一次。

我的意思是， 當我點擊information1它會展開，然後再次點擊information2。 然後信息1摺疊和信息2展開。 這意味着只有一次可以擴展。

我怎麼能做到這一點，只有使用CSS

<details> 
    <summary>Information1</summary> 
    If your browser supports this element, it should allow 
    you to expand and collapse these details. 
</details> 
<details> 
    <summary>Information2</summary> 
    If your browser supports this element, it should allow 
    you to expand and collapse these details. 
</details> 
<details> 
    <summary>Information3</summary> 
    If your browser supports this element, it should allow 
    you to expand and collapse these details. 
</details> 
<details> 
    <summary>Information4</summary> 
    If your browser supports this element, it should allow 
    you to expand and collapse these details. 
    </details> 

https://fiddle.jshell.net/mjxhj5se/

謝謝..

Answer 1

您可以通過使用jQuery做到這一點很容易在這裏是一個最簡單的教程Simple jQuery Accordion

Answer 2

可能無法通過css單獨實現。請看看;

Automatically close all the other <details> tags after opening a specific <details> tag

Answer 3

這個目前還不能<details>和<summary>只使用CSS與做，因爲CSS無法操縱的HTML元素的屬性 - 在這種情況下，open屬性。但是，如果您不需要使用<details>和<summary>，則CasperSL鏈接的solution適用於您的目的。

或者你也可以添加這個jQuery來實現與<details>和<summary>想要的效果：

$("details").click(function(event) { 
 
    $("details").not(this).removeAttr("open"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<details> 
 
    <summary>Summary 1</summary> 
 
    Some details 1. 
 
</details> 
 
<details> 
 
    <summary>Summary 2</summary> 
 
    Some details 2. 
 
</details> 
 
<details> 
 
    <summary>Summary 3</summary> 
 
    Some details 3. 
 
</details>