单击切换按钮时显示向下菜单答案

【问题标题】：Display down menu when click toggle button单击切换按钮时显示向下菜单
【发布时间】：2020-09-22 01:49:36
【问题描述】：

我的菜单向下显示，但随后水平显示。

我希望每个导航项都向下显示，彼此重叠。

LIVE 测试站点网址：ministerios-elim.herokuapp.com

CODEPEN：（点击 CodePen 时无法显示菜单）。

https://codepen.io/ogonzales/pen/abNQXLg

    <header>
    <!--MENU SUPERIOR-->
    <!-- Fixed navbar -->
    <nav class="navbar navbar-expand-md navbar-light fixed-top"
        style="height: 70px; padding-top: 0%; padding-bottom: 0%;" id="top-navbar">
        <div class="container">
           
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
                aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul>
                    <li class="nav-link mt-2">
                        <a href="/">Inicio</a>
                    </li>
                    
                    <li>
                        <a href="/doctrina/" class="nav-link mt-3" >Doctrina</a>
                    </li>
                    
                    <li>
                        <a href="/iglesias/" class="nav-link mt-3" >Iglesias</a>
                    </li>
                    

                </ul>
                <form class="form-inline ml-auto">
                    
                    <span class="text-white">Hola, ogonzales.</span>
                    <a href="/salir/" class="btn btn-primary ml-2">Salir</a>
                    
                </form>
            </div>
        </div>
    </nav>
</header>

更新 2：

更新 3：

#navbarCollapse ul li {
    display: block !important;
  }

【问题讨论】：

标签： javascript html css

【解决方案1】：

我已经修改了 html、css 并在修改的部分写了评论 /* 开始更新 */ /* 结束更新 */ - 我希望这很有用

/* start update */
nav ul {
  margin-bottom: 0;
}
.navbar-light .navbar-toggler-icon {
  background-image: none;
  font-size: 25px;
  height: auto;
  width: auto;
  padding: 3px;
}
@media(max-width: 768px) {
  #navbarCollapse ul li {
    display: block !important;
    padding: 0;
    margin: 0;
  }
  #navbarCollapse ul {padding-top:10px}
  #navbarCollapse ul li a {
    margin: 0;
    padding: 5px 10px;
  }
  nav {position: relative}
  nav form {
    position: absolute;
    top: 7px;
    right: 15px;
  }
}

/* end update */

<html class="no-js" lang="en">

<head>
  <meta charset="utf-8" />
  <title>
    Ministerios Elim - Inicio

  </title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="https://universidad-elim-test-videos.s3.amazonaws.com/css/mysite.css">
  <link rel="stylesheet" type="text/css" href="https://universidad-elim-test-videos.s3.amazonaws.com/css/fonts.css">
  <link rel="stylesheet" type="text/css" href="https://universidad-elim-test-videos.s3.amazonaws.com/css/banners.css">

</head>

<body class="">

  <header>
    <!--MENU SUPERIOR-->
    <!-- Fixed navbar -->
    <!-- start update -->
    <nav class="navbar navbar-expand-md navbar-light fixed-top" id="top-navbar">
      <div class="container">

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul>
            <li class="nav-link mt-2">
              <a href="/">Inicio</a>
            </li>

            <li>
              <a href="/doctrina/" class="nav-link mt-3">Doctrina</a>
            </li>

            <li>
              <a href="/iglesias/" class="nav-link mt-3">Iglesias</a>
            </li>

          </ul>
          
        </div>
        <form class="form-inline ml-auto">

            Hola,
            <a href="/ingresar/" class="btn btn-outline-secondary">Ingresar</a>
            <a href="/registrarse/" class="btn btn-primary ml-2">Registro</a>

          </form>
      </div>
    </nav>
    <!-- end update -->
  </header>

  <div class="" style="margin-top: 5%;">

    <div id="header">
      <!-- flex container -->

      <div class="box" style="margin-left: 0%;">
        <!-- flex item -->
        <div class="title">
          <div>ELIM</div>
          <div>ONLINE</div>
        </div>
      </div>

      <div class="box green_strips">
        <!-- flex item -->
        <div style="background-color: black; padding: 0.001em">
          <p style="color: white; margin-top: 1.2em; margin-bottom: 0em;">EXPANDIENDO
            <span class="yellowgreen">LA PALABRA DE DIOS</span></p>
          <p style="color: white; margin-top: 0em;">POR TODO EL <span class="yellowgreen">MUNDO</span></p>
        </div>
      </div>

    </div>

    <div class="container">
      <div class="row" style="padding-top: 3%;">
        <div class="col-md-8">
          <div id="comp-iq9y0o3iiFrameHolder" class="htco1iFrameHolder embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" name="htmlComp-iframe" scrolling="no" src="https://www-ministerioselimlosangeles-net.filesusr.com/html/c6c2ba_7e10543906cc3e0dfef547110eb63f30.html">
            </iframe>
          </div>
        </div>

        <div class="col-md-4" id="LocalSide">

          <h1>PROGRAMACIÓN EN VIVO</h1>
          <p>Martes, viernes y sábados: 7:30 p.m. PDT</p>
          <p>Domingos: 12:30 p.m. PDT</p>
          <p>Escoge tu Conexión Preferida</p>

        </div>
      </div>

    </div>

    <div class="row ofrendas_y_diezmo_contenedor">
      <div class="box">
        <span class="ofrendas_y_diezmos"> Diezmar y ofrendar</span><br>
        <div class="en_linea_y_desde_tu_movil_contenedor">
          <span class="en_linea_y_desde_tu_movil">Ahora lo puedes hacer en línea y desde tu móvil.</span>
        </div>
      </div>
      <div class="box">
        <style type="text/css">
          .tg {
            border-collapse: collapse;
            border-spacing: 0;
          }

          .tg td {
            border-color: black;
            border-style: solid;
            border-width: 1px;
            font-family: Arial, sans-serif;
            font-size: 14px;
            overflow: hidden;
            padding: 10px 5px;
            word-break: normal;
          }

          .tg th {
            border-color: black;
            border-style: solid;
            border-width: 1px;
            font-family: Arial, sans-serif;
            font-size: 14px;
            font-weight: normal;
            overflow: hidden;
            padding: 10px 5px;
            word-break: normal;
          }

          .tg .tg-0lax {
            text-align: left;
            vertical-align: top
          }
        </style>
        <table class="tg">
          <thead>
            <tr>
              <a href="https://secure.subsplash.com/ui/access/876ZZX/" class="btn btn-primary btn-lg btn-block" target="_blank">Paypal</a>
            </tr>
          </thead>
          <tbody>
            <tr>
              <a href="https://secure.subsplash.com/ui/access/876ZZX/" class="btn btn-dark btn-lg btn-block" target="_blank">SUBSPLASH</a>
            </tr>
            <tr>
              <button type="button" class="btn btn-info btn-lg btn-block">Usando Zelle $ al 323-490-9435</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

  </div>

  <footer class="footer" style="padding-top: 5%;">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h2>Próximos servicios:</h2>
        </div>
      </div>
      <div class="row" style="padding-top: 4%;">
        <div class="col-md-8">
          <table class="table">
            <thead>
              <tr>
                <th scope="col">Martes</th>
                <th scope="col">Viernes</th>
                <th scope="col">Sábados</th>
                <th scope="col">Domingos</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>7:30 p. m.</td>
                <td>7:30 p. m.</td>
                <td>7:30 p. m.</td>
                <td>12:30 p. m.</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-md-4">
          <div style="padding-left: 20%; padding-top: 15%;">

          </div>
        </div>
      </div>
    </div>
    <div style="background-color: rgb(202, 202, 202);">
      <div class="container">
        <div class="row">
          <p>8400 S Hoover St, Los Ángeles, CA 90044 | (323) 789-1665</p>
        </div>
      </div>
    </div>
  </footer>

  <script src="https://kit.fontawesome.com/8b3cda2e27.js" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://universidad-elim-test-videos.s3.amazonaws.com/js/mysite.js"></script>

</body>

</html>

【讨论】：

谢谢你，Em An。我已经进行了更改并推送到 Heroku，以便您可以实时查看该站点。不知何故，navitems 在导航栏中呈现，但不是一个在另一个之上。我错过了什么？ ministerios-elim.herokuapp.com
拿我写给你的css，你还没拿！

【解决方案2】：

要垂直获取 - 只需添加一行 CSS：

#navbarCollapse ul li {
  display: block;
}

更新 2 我猜是缓存（可能是亚马逊，如果有的话也可能是 w3tc），因为前面的元素没有显示：块，请参阅附件：

【讨论】：

Ty 但不工作。您可以在实时站点中访问 css (mysite.css)：ministerios-elim.herokuapp.com
将 !important 添加到末尾，即#navbarCollapse ul li {display: block !important;}
hm，实际上我在您网站的 css 中没有看到 display: block
请看我的更新2。我会尝试添加重要的部分。
Ivan，添加重要不仅会影响移动视图，还会影响页面的桌面视图。请参阅更新 3。