Javascript得到css身高的适当性

Question

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

我尝试通过获取由函数更改的相同属性来执行此操作，如下所示：

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

但是，因为它似乎完全合乎逻辑，它不起作用，此外它还锁定了该功能。 GLOBAL变量可以解决问题，但他们说我们应该避免全局因为安全性。

<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香草的解决方案。我不使用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>

1. 删除附加到'button'元素的onclick
2. 获取按钮和menu01的元素
3. 为每个元素添加事件侦听器。 （我尝试了Akhil Aravind的答案代码，当你点击列表项时，所有元素都消失了。也许是bug）
4. 我只是将元素保存到一个数组中，并使用每个元素使其更短（不需要写两次）