Question

我在一个网站上查看一些 HTML 编码，我看到很多网站使用这 3 个点 (...) 来隐藏 2 个 <> 之间的代码位。

当您单击这些点时，会打开更多代码，您可以阅读 2 个 <> 中的内容。

示例 2：https://i.stack.imgur.com/t2tYS.jpg

所以我的问题是，我如何在我自己的代码中做到这一点？就像我有 <> 很多文本 <> 一样，我如何使 <> 的 3 个点内的文本只有在您单击它们时才可见（以节省空间）。

提前致谢！

Answer 1

我阅读了您的问题并提出了此解决方案，并且运行良好。

<html>
<head>
<style>
  .alterabletext{
  display: inline-block;
  cursor: pointer;
  }
</style>
<title>EXAMPLE</title>
</head>
<body>
<div class="content">
&lt; <div class="alterabletext" onclick="myFunc()" id="alterabletext">...</div> &gt;
</div>
<script>
  function myFunc(){
    var element = document.getElementById("alterabletext");
    element.innerHTML="A LOT OF TEXT";
  }
</script>
</body>
</html>

我希望这能如您所愿。美好的一天！

Answer 2

我阅读了您的问题并提供了这个简单的解决方案。看起来不错！

<html>  <!-- Start the document -->
<head>
<!-- Ads some styles -->
<style>
  .demo { /* Gets the element by the CLASS */
  cursor: pointer; /* Use cursor:pointer to make a pointer cursor :-) */
  /* Optional. do not include this... */
  font-size: 20px;
  color: black;
  padding: 10px;
  }
</style>
<title>EXAMPLE</title> <!-- Ads a title to your webpage -->
</head>
<body>
   <span style="float: right;">&lt; <span class="demo" onclick="myFunction()" id="demo">⋮</span> &gt;</span>
<script>
  function myFunction(){
    var x = document.getElementById("demo"); // Creates an variable to help us change the text - this variable identifies the element from the DOM (HTML tag)
    x.innerHTML="Lot's of text!"; // Get the element from the variable and change it
  }
</script>
</body>
</html>

美好的一天！ PS：寻找 < 和 > 是什么意思？检查What do < and > stand for?

Tiago R.

如何隐藏代码元素并在单击它们时显示它们 HTML

2 个答案: