Question

如何仅使用HTML制作可扩展文本？

我有一个本教程改编的工作代码，但找不到原始教程。现在，单击该图像，文本在其下方展开。本教程最初有文字，但我将其更改为图像，但现在我想要用于其他项目的文字，无法在我的一生中解决。（链接等已更改为stackoverflow）

<table style="width:100%"><tr><td>

<img src="https://i.imgur.com/PYIzMc6.jpg" width="200" title="Click to show/hide text" onclick="if(document.getElementById('sizes') .style.display=='none') {document.getElementById('sizes') .style.display=''}else{document.getElementById('sizes') .style.display='none'}"/></td></tr><tr>
<td>
<div id="sizes" style="display:none">
<a href="https://facebook.com/">one</a><br/>
<a href="https://tumblr.com/">two</a><br/>
<a href="https://google.com/">three</a><br/></div></td></tr>

</div></td>

</tr></table>

我不知道如何获得被单击的部分以扩展到文本（而不是图像）的链接-或如果可能的话，两者都可以。

Answer 1

您编写“仅使用HTML”，但使用的是内联JavaScript，因此我认为类似于您的示例的JS解决方案就可以了。

只需将<img>标记更改为<span>（或<p>段落，或任何适合您需要的标记，并删除图像特定的属性。

此外，在结束</table>标记之前，您的标记还有一些不必要的标记。

<table style="width:100%">
  <tr>
    <td>
      <span
        title="Click to show/hide text"
        onclick="if(document.getElementById('sizes') .style.display=='none') {document.getElementById('sizes') .style.display=''}else{document.getElementById('sizes') .style.display='none'}">
          toggle list
        </span>
    </td>
  </tr>
  <tr>
    <td>
      <div id="sizes" style="display:none">
        <a href="https://facebook.com/">one</a><br/>
        <a href="https://tumblr.com/">two</a><br/>
        <a href="https://google.com/">three</a><br/></div>
    </td>
  </tr>
</table>

HTML可以用文本而不是图像折叠吗？

1 个答案: