时间戳

首页 > 解决方案 > 试图制作一个命令页面来列出我的不和谐机器人上的所有命令，但不知道如何

html - 试图制作一个命令页面来列出我的不和谐机器人上的所有命令，但不知道如何

问题描述

我想弄清楚如何为我的不和谐机器人的网站制作一个命令页面。我希望命令页面看起来和工作像这样https://amaribot.com/commands但我只是看在上帝的份上，无法弄清楚！任何人都可以帮助我或提供一些代码/建议来帮助：3

标签： htmlcsscommanddiscord

解决方案

你需要使用 Bootstrap 可折叠手风琴

这是一个例子：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>



<div class="container">

  <div id="accordion">
    <div class="card">
      <div class="card-header">
        <a class="card-link" data-toggle="collapse" href="#collapseOne">
          1st ITEM
        </a>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#accordion">
        <div class="card-body">
          Some text inside the 1st item
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
        Item #2
      </a>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          some more text inside this one
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
          another one #3
        </a>
      </div>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          some text to be shown here
        </div>
      </div>
    </div>
  </div>
</div>

我希望它可以帮助你。

推荐阅读