Как я могу добавить контент в мою панель topnav, я хочу, чтобы пользователь мог щелкнуть по ним и всплыла информация

Question

<div class="topnav">
    <a class="active" href="#"<i class="fa fa-fw fa-home"></i> Home</a>
    <a href="#"><i class="fa fa-fw fa-search"></i> Search</a>
    <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact Us</a>
    <a href="#"><i class="fa fa-fw fa-about"></i> About</a>
    <div class="topnav-right">
        <a href="#"><i class="fa fa-fw fa-user"></i> Login</a>
    </div>
</div>

Я хочу иметь возможность щелкнуть один из них, и содержимое отображается под панелью навигации. Я пытался исследовать это, но не могу получить правильный ответ.

Answer 1

Пожалуйста, посмотрите код в фрагменте ниже, надеюсь, он отвечает на ваш вопрос.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Simple Collapsible</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <p>With in the code below pay attention to the data-target and data-toggle='collapse'</p>
  <p>If you implement them in your code you should be able to achieve the desired result<p/>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>