[英]Trying to create a dropdown menu inside a table that stays after first click
我將此菜單插入到表格中，我希望在單擊表格中的某個單元格后將第二個菜單隱藏起來，但是每次單擊第二個菜單時就會消失。
我希望每次單擊“菜單1”或“菜單”時，都在“菜單1”或“菜單2”內部的“第二個導航”中顯示該選項。 另外，當它顯示我希望他們呆在那里時，當我再次單擊它時，它就會消失。 請參閱摘錄，以更好地了解我正在努力實現的目標。
$(".menu1").on('click',function () { $(".second nav").$('li div ul').toggle(''); }); $('.nav > li div ul li a').click(function(e) { e.stopPropagation(); }); // menu 2 $(".menu2").on('click',function () { $('.nav').$('li div ul').toggle(''); }); $('.nav > li div ul li a').click(function(e) { e.stopPropagation(); }); // menu 3 $(".menu3").on('click',function () { $(".nav").$('li div ul').toggle(''); }); $('.nav > li div ul li a').click(function(e) { e.stopPropagation(); }); // menu 4 $(".menu4").on('click',function () { $(".nav").$('li div ul').toggle(''); }); $('.nav > li div ul li a').click(function(e) { e.stopPropagation(); }); // menu 5 $(".menu5").on('click',function () { $(".nav").$('li div ul').toggle(''); }); $('.nav > li div ul li a').click(function(e) { e.stopPropagation(); });
tr{ color: black; } * { margin:0; padding:0; } h1{ color:Black; } .close{display:none;} li.menu1{ background-color: orange; } li.menu2{ background-color: orange; } li.menu3{ background-color: orange; } li.menu4{ background-color: orange; } li.menu5{ background-color: orange; } /* Första boxarna*/ ul.nav { list-style: none; display: block; width: 100%; position: relative; z-index:0; color: orange; -webkit-background-size: 50% 100%; display: list-item; font-family: OpenSans-Regular; font-size: 18px; } li { margin: 5px 0 0 0; } ul.nav li a { -webkit-transition: all 0.3s ease-out; color: white; padding: 7px 15px 7px 15px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 5px; display: block; text-decoration: none; -webkit-box-shadow: 2px 2px 4px 2px #888; } ul.nav li a:hover { color: #67a5cd; padding: 9px 15px 7px 30px; } ul.nav li ul { display:none; } ul.nav li:active ul { display:block; position:relative; left:3px; top:0px; list-style: none; z-index:999; background: orange; } ul.nav li ul li { background:orange; opacity: 0.5; }
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <h1 strong>Plataforma de Alocações</h1> <link rel="stylesheet" href="CSS/menu.css"> <body> <table width="200px" border="0" align="left" cellpadding="10" cellspacing="5"> <tr> <td>Sociedade Construções Manuel Moreira Maia LDA</td> </tr> <!--menu 1 --> <tr> <td> <ul class="nav"> <li class="menu1"><a href="#">Alocações</a> <div class="second nav"> <ul> <li><a href="#">Nova Alocação</a></li> <li><a href="#">Listar Alocações</a></li> </ul></div></li> </ul> </td> </tr> <!--menu 2 --> <tr> <td> <ul class="nav"> <li class="menu2"><a href="#">Projetos</a> <div class="second nav"> <ul> <li><a href="#">Listar Projetos</a></li> </ul></div></li> </ul> </td> </tr> <!--menu 3 --> <tr> <td> <ul class="nav"> <li class="menu3"><a href="#">Colaborador</a> <div class="second nav"> <ul> <li><a href="#">Adicionar Colaborador</a></li> <li><a href="#">Listar Colaboradores</a></li> </ul></div></li> </ul> </td> </tr> <!--menu 4 --> <tr> <td> <ul class="nav"> <li class="menu4"><a href="#">Meios de Transporte</a> <div class="second nav"> <ul> <li><a href="#">Adicionar veículo</a></li> <li><a href="#">Listar Veículos</a></li> </ul></div></li> </ul> </td> </tr> <!--menu 5 --> <tr> <td> <ul class="nav"> <li class="menu5"><a href="#">Prestadores de Serviçoes</a> <div class="second nav"> <ul> <li><a href="#">Adicionar Novo Prestador</a></li> <li><a href="#">Listar Prestador de Serviços</a></li> </ul></div></li> </ul> </td> </tr> </table> <script src="JS/jquery-3.3.1.js"></script> <script src="JS/menu.js"></script> </body> </html>
在您的JavaScript代碼中，類選擇器不正確：
$(".second nav").$('li div ul').toggle('');
一定是
$(".second.nav").$('li div ul').toggle('');
因為“ nav”是標記的第二類，而不是“ nav” html組件
我用一個工作示例創建了一個小提琴： https : //jsfiddle.net/o2gxgz9r/52977/
動態創建后首次單擊時未顯示下拉菜單
[英]Dropdown menu not being displayed on first click after being created dynamically
在提交和更新數據庫后保留的表格行內創建一個文本表單
[英]Create a text form inside table row that stays after submission and updates database
嘗試使用菜單下拉菜單創建導航欄，但我的菜單項似乎不想顯示或它們隱藏在父容器中
[英]Trying to create a navbar with a menu dropdown, but my menu items seem to not want to appear or they are hidden inside my parent container
嘗試創建一個下拉菜單，但它不適用於JavaScript
[英]trying to create a dropdown menu but it is not working for the javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.