2013-05-25 199 views
7

這是我的代碼。打開特定的<details>標籤後自動關閉所有其他<details>標籤

<details> 
 
    <summary>1</summary> 
 
    Demo 1 
 
</details> 
 

 
<details> 
 
    <summary>2</summary> 
 
    Demo 2 
 
</details> 
 

 
<details> 
 
    <summary>3</summary> 
 
    Demo 3 
 
</details>

我想要做的是 - 如果任何單個<details>標籤的細節是開放的,我打開/查看其他<details>標籤,然後較早的企業之一應該關閉/隱藏/最小化。

這是如何實現的?

我知道IE或Edge不支持<details>標記。

+1

那你試試這麼遠嗎? – Femaref

回答

0

我想出了一個解決方案。如果這是一個錯誤的方法,請糾正我。

我加入onClick事件的所有細節標籤的,並提出了功能thisindex(this)它返回所點擊的標籤和所獲得的索引號的索引隨後被傳遞到另一個功能closeAll(),其最小化/關閉所有其他打開的標籤除了索引與我們之前獲得的索引相匹配的索引。

這是代碼。

function thisindex(elm){ 
 
    var nodes = elm.parentNode.childNodes, node; 
 
    var i = 0, count = i; 
 
    while((node=nodes.item(i++)) && node!=elm) 
 
    if(node.nodeType==1) count++; 
 
    return count; 
 
} 
 

 
function closeAll(index){ 
 
    var len = document.getElementsByTagName("details").length; 
 

 
    for(var i=0; i<len; i++){ 
 
    if(i != index){ 
 
     document.getElementsByTagName("details")[i].removeAttribute("open"); 
 
    } 
 
    } 
 
}
<details onclick="closeAll(thisindex(this));"> 
 
    <summary>1</summary>Demo 1 
 
</details> 
 

 
<details onclick="closeAll(thisindex(this));"> 
 
    <summary>2</summary>Demo 2 
 
</details> 
 

 
<details onclick="closeAll(thisindex(this));"> 
 
    <summary>2</summary>Demo 3 
 
</details>

用相同的jQuery

$(document).ready(function(){ 
    $('details').click(function (event) { 
    var index = $('details').index(this); 
    var len = $("details").length; 
    for(var i=0; i<len; i++){ 
     if(i != index){ 
     $("details")[i].removeAttribute("open"); 
     } 
    } 
    }); 
}); 

幫助請建議我一個更好的方法,如果這沒有達到標準。

+1

'

'標籤有一個名爲'open'的屬性。如果給出該屬性,那麼detail標籤已經打開。所以在這種情況下,我使用JavaScript來簡單地刪除該屬性,以關閉標籤。 –

+0

感謝您的解決方案!我不是JavaScript的大師,但是有沒有辦法打開屬性打開?這看起來更復雜,你找到了一個更簡單的解決方案嗎?我已經嘗試過了,它的功能足夠好。我只是問是否有一個更簡單的方法 –

+0

'document.querySelectorAll(「details [open]」)'將選擇當前打開的所有'details'標籤。 –

8

相同的概念,只是短一點。

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

的另一種方法,略短,會更有效,without dependencies,沒有的onclick在HTML屬性。

// Fetch all the details element. 
 
const details = Array.from(document.querySelectorAll("details")); 
 

 
// Add the onclick listeners. 
 
details.forEach((targetDetail) => { 
 
    targetDetail.addEventListener("click",() => { 
 
    // Close all the details that are not targetDetail. 
 
    details.forEach((detail) => { 
 
     if (detail !== targetDetail) { 
 
     detail.removeAttribute("open"); 
 
     } 
 
    }); 
 
    }); 
 
});
<details> 
 
    <summary>1</summary>Demo 1 
 
</details> 
 

 
<details> 
 
    <summary>2</summary>Demo 2 
 
</details> 
 

 
<details> 
 
    <summary>3</summary>Demo 3 
 
</details>

相關問題