Question

我有这个CSS过渡效果菜单，该菜单通过按钮上的click事件用Javascript功能激活。但是，如果菜单可见，我需要使用相同的按钮来隐藏菜单。

我尝试通过获取相同的属性来做到这一点，如下所示：

if (menu01.style.maxHeight == '0px')
menu01.style.maxHeight = '600px';
else
menu01.style.maxHeight = '0px';

但是，似乎完全合乎逻辑，它不起作用，而且它锁定了该功能。 GLOBAL变量可以解决问题，但是他们说，出于安全性考虑，我们应该避免使用Globals。

<style type="text/css">
#menu01{
display: block;
position: absolute;
top:0px;
left: 130px;
width: 120px;
border-top: none;
background: white;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1);
max-height: 0px;
overflow: hidden;
transition-property: max-height;
transition: all 1s ease-in-out;
}
</style>

<div id="menu01">
<a href="" title="Alterar Dados">Meus Dados</a><hr>
<a href="" title="Alterar Senha">Alterar Senha</a><hr>
<a href="" title="Alterar Senha">Agenda</a><hr>
<a href="" title="Alterar Senha">Calendario</a><hr>
<a href="" title="Alterar Senha">Sair</a>
</div>

<button onclick="showmenu()">Menu(show/hide)</button>

<script type="text/javascript">
function showmenu(){
    var menu01 = document.getElementById('menu01');
    menu01.style.maxHeight = '600px';
}
</script>

我需要Javascript Vanilla解决方案。我不使用jQuery。

Answer 1

这非常简单，因为您要添加600px max height属性，所以在按钮上单击添加逻辑以检查高度并在0px和600px之间切换高度。

签出代码段

function showmenu(){
    var menu01 = document.getElementById('menu01');
    menu01.style.maxHeight = menu01.style.maxHeight == '600px' ? '0px': '600px';
}

#menu01{
display: block;
position: absolute;
top:0px;
left: 130px;
width: 120px;
border-top: none;
background: white;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1);
max-height: 0px;
overflow: hidden;
transition-property: max-height;
transition: all 1s ease-in-out;
}

<div id="menu01">
<a href="" title="Alterar Dados">Meus Dados</a><hr>
<a href="" title="Alterar Senha">Alterar Senha</a><hr>
<a href="" title="Alterar Senha">Agenda</a><hr>
<a href="" title="Alterar Senha">Calendario</a><hr>
<a href="" title="Alterar Senha">Sair</a>
</div>

<button onclick="showmenu()">Menu(show/hide)</button>

Answer 2

根据Akhil Aravind的答案提出另一种方法:) 最好使用addEventListener以便将来使用，这样您就可以将该函数用于另一个DOM元素。

<script type="text/javascript">
    var showMenuButton = document.getElementsByTagName('button')[0];
    var menu01 = document.getElementById('menu01');
    var elementArray = [showMenuButton, menu01];
    elementArray.forEach(function (element) {
        element.addEventListener('click', function () {
            showmenu(menu01);
        })
    })
    function showmenu(menuElement){   
        menuElement.style.maxHeight = menuElement.style.maxHeight == '600px' ? '0px': '600px';
    }
    </script>

删除附加到“按钮”元素的onclick
获取按钮和menu01的元素
为每个元素添加事件监听器。（我尝试了Akhil Aravind的答案代码，当您单击列表项时，所有元素都消失了。也许是bug）
我只是将元素保存到数组中，并使用每个元素使它更短（无需编写两次）

Javascript获取CSS高度适当性

2 个答案: