通过超链接打开摘要标签答案

【问题标题】：Open a Summary tag via a hyperlink通过超链接打开摘要标签
【发布时间】：2016-04-06 21:52:02
【问题描述】：

我想打开一个<summary> 标记并在单击超链接时查看它的内容。

我该怎么做呢？

目前，我只能在单击超链接时查看摘要标签。

当我说摘要标签时，我的意思是

<summary>

这是一个 sn-p，感谢 Praveen Kumar

echo '<a href="#" onclick="det.attribute("open","false"); return false;">'.$nextLine.'</a>';

我想参考 peak1 图片

echo '
                    <section>
                        <details>
                            <summary> Peak Image </summary>';
                                # create a bookmark with the id attribute. Used to link from Peak Table rows
                                # create collapsable windows for each peak image 
                                echo '
                                    <details id="det"> 
                                        <summary> Peak 1 </summary>';                                   
                                        echo '<h2 id="peak1">Peak 1</h2>
                                        <img src="open/images/peak1.png" alt="Peak1" height="2500" width="1000">
                                    </details>

【问题讨论】：

@PraveenKumar 我编辑了这个问题。
嗯，到目前为止你得到了什么？
好的，所以查了一下，在 HTML5 中实际上有一个 <summary> 标签。但问题是，几乎没有任何浏览器支持它。但这并不能解释您要达到的目标。所以，请详细说明。
@Roope Chrome 支持它。
这就是为什么我说几乎没有。

标签： javascript php html google-chrome

【解决方案1】：

我认为您正在寻找的是一个模态窗口。

这是一个关于如何做到这一点的教程：

http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

【讨论】：

【解决方案2】：

你在寻找这样的东西吗？

a + .meta {display: none;}
a:focus + .meta {display: block;}

<a href="#">Hello</a>
<div class="meta">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum voluptatem sit sed, aspernatur in doloribus magnam ad deleniti. Aperiam at illo nihil repellat placeat aspernatur, unde soluta aliquam nesciunt beatae.</p>
  <p>Eaque soluta, aliquam aut recusandae voluptates debitis dolore inventore itaque eligendi optio numquam architecto labore neque distinctio quia ducimus qui fuga. Dolores distinctio, tempore iusto odio ipsa, quidem est rem.</p>
</div>
<br />
<a href="#">Hello</a>
<div class="meta">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum voluptatem sit sed, aspernatur in doloribus magnam ad deleniti. Aperiam at illo nihil repellat placeat aspernatur, unde soluta aliquam nesciunt beatae.</p>
  <p>Eaque soluta, aliquam aut recusandae voluptates debitis dolore inventore itaque eligendi optio numquam architecto labore neque distinctio quia ducimus qui fuga. Dolores distinctio, tempore iusto odio ipsa, quidem est rem.</p>
</div>
<br />
<a href="#">Hello</a>
<div class="meta">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum voluptatem sit sed, aspernatur in doloribus magnam ad deleniti. Aperiam at illo nihil repellat placeat aspernatur, unde soluta aliquam nesciunt beatae.</p>
  <p>Eaque soluta, aliquam aut recusandae voluptates debitis dolore inventore itaque eligendi optio numquam architecto labore neque distinctio quia ducimus qui fuga. Dolores distinctio, tempore iusto odio ipsa, quidem est rem.</p>
</div>

或者，通过超链接打开摘要标签：

<a href="#" onclick="det.setAttribute('open', 'true'); return false;">Open the Summary Tag</a> &bull;
<a href="#" onclick="det.removeAttribute('open'); return false;">Close the Summary Tag</a>
<br />
<br />
<details id="det">
  <summary>Click on the Link</summary>
  <p>Hey, I am open!</p>
</details>

【讨论】：

第二个是我正在寻找的，但第一个似乎在更多浏览器上受支持。对于第二个脚本，我使用了代码中的关键点，因为它没有成功。
@Crt 现在复制我的代码对你有用吗？如果可行，请接受我的回答。
我编辑了这个问题，但你的回答帮了很多忙。
@Crt Lemme 试着回答你的问题，等等。
@Crt 把第一个sn-p改成echo '<a href="#" onclick="det.removeAttribute('open'); return false;">'.$nextLine.'</a>';