单击切换按钮时显示向下菜单
[英]Display down menu when click toggle button
问题描述
我的菜单向下显示，然后水平显示。
我希望每个导航项都显示在彼此之上。
LIVE测试站点的URL： 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;
}
2 个解决方案
解决方案1
1 2020-09-22 02:38:57
我已经修改了 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 pm: 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>
解决方案2
0 2020-09-22 06:14:30
要垂直获取它 - 只需添加一行 CSS：
#navbarCollapse ul li {
display: block;
}
更新 2我猜它是缓存（可能是亚马逊，如果你有的话也可能是 w3tc），因为前面的元素没有 display: block ，请看附件：
页面加载时隐藏菜单，onclick按钮显示菜单，第一次单击显示，第二次单击隐藏，例如在angular 4.0中切换
[英]hide menu when page loads, onclick button show menu, first click show, second click hide, like toggle in angular 4.0
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.