【问题标题】:Expand collapse text with html用 html 展开折叠文本
【发布时间】:2018-07-18 17:36:36
【问题描述】:

我想展开/折叠文本。我为此找到了几个代码,但是他们使用的问题将 .html 文件分开 我需要的是将它们全部设置在同一个文档 .html 中 因为我使用的是 HTML 编辑器,所以我必须将所有代码都放在同一个页面中。 请告知该怎么做,或者是否有一个非常有帮助的教程。 提前谢谢你。

【问题讨论】:

  • 只需在 中插入 js 代码,在 中插入 css
  • 唯一的建议是:阅读关于 HTML/CSS 的教程……你会在任何教程的开头找到它。 5分钟搜索,你有你想要的
  • 谢谢,是的,这就是我插入的
  • Is it possible to do it with pure HTML :不...... HTML不是JS,JS不是HTML。 JS 必须进入 script 标签内
  • 索要代码、教程、建议都是题外话 ;)

标签: javascript html css collapse expand


【解决方案1】:

您可以使用纯 HTML 来做到这一点。只有 2 个术语。

<details>
<summary> click me </summary>
Text you want to expand or collide
</details>

就这么简单

【讨论】:

    【解决方案2】:

    你去研究这个,你就会明白基本的:

    W3Schools

    用这个编辑你的代码(不仅仅是括号):

    Brackets

    这是带有style标签和script标签的一页HTML:

    您的css 将进入&lt;style&gt;&lt;/style&gt;

    您的js 将进入&lt;script&gt;&lt;/script&gt;

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html/js; charset=utf-8" />
    
    <title>Untitled Document</title>
        
    <style>
    
    .page-header {
      color: #000;
    }
    
    #click {
      border-radius: 2%;
      height: 30px;
      color: green;
    }
         
    </style>
    
    </head>
    
    <body class="test">
        <header class="page-header">SIMPLE EXAmPLE</header>      
    <div class="row">
      <div class="element">
          <div class="start" id="testdiv"></div>
          <button id="click">click to color background</button>
      </div>
    </div>   
    </body>
        
    <script type="text/javascript">
        var clickAlert = document.getElementById('click');
        var rainbow = ["red", "blue", "green", "yellow"];
    
        function change() {
          document.body.style.background = rainbow[Math.floor(4*Math.random())];
        }
    
        clickAlert.addEventListener("click", change);  
    </script>  
    </html>

    【讨论】:

    • 好吧,不确定这个问题是否值得回答。他询问的是 HTML/CSS 的基础知识,他至少需要进行一些搜索。在 5 分钟内,他可以从任何教程中得到他想要的东西。没有什么对你不利的,但是回答这样的问题会鼓励人们在不做任何努力的情况下发布这类问题。 [顺便说一下我的看法]
    • @TemaniAfif 我和你又见面了,我明白,我实际上在我的桌面上有这个 html 并决定继续使用它,但我毫无疑问地同意你。
    • 这与代码无关,我的问题是我无法在代码中插入
    • 然后使用另一个编辑器,比如括号?你用的是什么编辑器?
    • @victoria 的东西是像括号和dreamweaver 这样的编辑器都接受html 中的js 和css,即使它看起来不像,当你在浏览器中运行页面时,你会看到它有效,这取决于你的script/html/css 有效。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-03-12
    • 2010-10-02
    • 2016-04-18
    • 2011-11-02
    • 2013-07-17
    • 2015-01-13
    • 1970-01-01
    相关资源
    最近更新 更多