Automatisch <details> Element bei ID-Aufruf öffnen

Question

Ich versuche, ein Element automatisch zu öffnen, wenn ein Containing von ID aufgerufen wird, zum Beispiel: http://www.example.com/page.html#container. Im Idealfall möchte ich, dass Sie bis zu dem Punkt der Seite blättern, auf der sich das Element befindet (innerhalb des Zusammenfassungselements), und dann das Detailelement öffnen. Offensichtlich funktioniert die native Scroll-Funktion gut, aber wie kann ich das Detailelement zum Öffnen einstellen?

Hier ist meine HTML-Quelle:

<details class="concentration"> 
    <summary> 
     <h4 id="sample-slug"><?php the_sub_field('emphasis_name'); ?></h4> 
    </summary> 

    <p><?php the_sub_field('emphasis_description'); ?></p> 

    <div class="courses"><?php the_sub_field('emphasis_course_list'); ?></div> 
</details> 

Wenn example.com/page.html#sample-slug genannt wird, wie kann ich die Details Element bewusst, dass zu machen, und fügen Sie das „offene“ Attribut? Ich möchte sicherstellen, dass der Inhalt sichtbar ist, wenn der Anker aufgerufen wird.

Answer 1

Ich glaube nicht, dass Sie <details> mit CSS allein öffnen können. Aber Sie können:

1. Holen Sie sich den Hash mit location.hash. Möglicherweise hören Sie hashchange Ereignis.
2. Verwenden Sie document.getElementById, um das Element zu erhalten.
3. Setzen Sie die Eigenschaft open auf true.

function openTarget() { 
 
    var hash = location.hash.substring(1); 
 
    if(hash) var details = document.getElementById(hash); 
 
    if(details && details.tagName.toLowerCase() === 'details') details.open = true; 
 
} 
 
window.addEventListener('hashchange', openTarget); 
 
openTarget();

:target { 
 
    background: rgba(255, 255, 200, .7); 
 
}

<details id="foo">Details <summary>Summary</summary></details> 
 
<div><a href="#foo">#foo</a> <a href="#bar">#bar</a></div>