我正在写一个下拉菜单，我想让下拉菜单由 javascript 控制。
我的下拉菜单有隐藏的子菜单 max-height: 0px; 当点击相应的 anchor 标签时，我将其 max-height 参数更改为 400px ，使用以下函数:
function drop_down(name) {
document.getElementById(name).style.maxHeight = "400px";
}
到目前为止一切顺利。问题是元素的 max-height 保持在 400px 并且子菜单没有隐藏。所以我想我应该瞄准鼠标点击，当发生这种情况时检查是否有任何元素为 400px 并将其更改回 0。
$('html').click(function() {
var max_h = document.getElementsByClassName("nav_content");
var i;
for(i = 0 ; i < max_h.length ; i++)
{
if(max_h[i].style.maxHeight == "400px")
{
max_h[i].style.maxHeight = "0px";
}
}
});
实际情况是此函数会跟踪每次点击，甚至是用于显示子菜单的点击。所以我的问题是:有没有办法在我点击我的子菜单后只激活第二个功能？因为我总是希望显示菜单后的点击关闭子菜单。
HTML:
<body>
<div class="nav_container">
<nav class="nav_main">
<div class="logo">
<a href="#">
<img src="../majo.png" alt="logo">
</a>
</div>
<ul class="nav" id="nav">
<li>
<a href="user_menu.php" class="nav_item">Home</a>
</li>
<li>
<a href="#" class="nav_item" onclick="drop_down('nav_consul')">Consultas</a>
<div id="nav_consul" class="nav_content">
<div class="nav_sub">
<ul>
<li>
<a href="consul/inf_dia_dia">Informação Dia a Dia</a>
</li>
<li>
<a href="consul/tot_men">Totais Mensais</a>
</li>
<li>
<a href="consul/cur_tar">Tarifário Atual da Rede</a>
</li>
<li>
<a href="consul/dat_esp">Data específica</a>
</li>
<li>
<a href="consul/sys_act">Atividade do Sistema</a>
</li>
<li>
<a href="consul/coimas">Coimas</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="nav_item" onclick="drop_down('nav_simul')">Simulações</a>
<div id="nav_simul" class="nav_content">
<div class="nav_sub">
<ul>
<li>
<a href="simul/add_simple_tar">Criar tarifa Simples</a>
</li>
<li>
<a href="simul/add_complex_tar">Criar tarifa Complexa</a>
</li>
<li>
<a href="simul/simular">Simular com Nova Tarifa</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="nav_item" onclick="drop_down('nav_prefs')">Preferências</a>
<div id="nav_prefs" class="nav_content">
<div class="nav_sub">
<ul>
<li>
<a href="prefs/list_access">Lista de acessos</a>
</li>
<li>
<a href="prefs/alt_pass">Alterar Password</a>
</li>
<li>
<a href="prefs/alt_dados_conta">Alterar Dados de Conta</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="../log_out.php" class="nav_item">Log Out</a>
</li>
</ul>
</nav>
</div>
<div id="content_main">
</div>
<footer></footer>
<script src="../js/jQuery.js"></script>
<script src="../js/user_menu.js"></script>
<script src="../js/user_nav.js"></script>
<script src="../js/user_clear_sub_menu.js"></script>
</body>
最佳答案
这是一个简单的解决方案:
创建以下 CSS 样式:
.nav_content.visible {
max-height: 400px;
}
.nav_content.invisible {
max-height: 0px;
}
将 nav_content 的溢出属性设置为隐藏:
.nav_content{
overflow: hidden;
}
现在将 invisible 类添加到您的子菜单中，如果您希望它们默认不可见(您可以在标记中或通过 js 代码手动执行此操作):
手动例如:
<div id="nav_prefs" class="nav_content invisible">
或通过代码(元素加载后):
$(".nav_content").addClass("invisible);
现在，如果您只需要调整 drop_down 函数来切换元素的 invisible/visible 类:
function drop_down(dropdownID){
$('#'+dropdownID).toggleClass("visible invisible");
}
更新:要使所有可见的子菜单在其他地方单击时消失，请在加载窗口时使用这段代码:
$(document).on('click', function (e) {
if (!$(e.target).is('.nav_item') && !$(".nav_item").has(e.target).length !== 0) {
$('.nav_content.visible').toggleClass("visible invisible");
}
});
如果您一次只想显示一个子菜单，可以使用此版本的 drop_down 函数:
function drop_down(dropdownID) {
$('.nav_content.visible').toggleClass("visible invisible");
$('#' + dropdownID).toggleClass("visible invisible");
}
可以找到可用的 fiddle here
编辑:由于您在原始代码中使用了 jQuery，我假设答案也可以使用 jQuery
关于javascript - 单击后更改最大高度元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29746660/