Javascript получить CSS высоту уместности

Question

У меня есть это меню с эффектом перехода CSS, которое активируется с помощью функции Javascript через событие нажатия кнопки. Однако мне нужна та же кнопка, чтобы скрыть меню, если оно отображается.

Я попытался сделать это, получив то же свойство, которое изменяется функцией, следующим образом:

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

Однако, как это может показаться совершенно логичным, ЭТО НЕ РАБОТАЕТ, и, кроме того, оно блокирует функцию. Глобальная переменная может решить проблему, но они говорят, что мы должны избегать глобальных переменных из-за безопасности.

<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

Предложение других методов, основанных на ответе Ахила Аравинда :) Предпочитайте использовать 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'
2. получить элементы для кнопки и меню01
3. добавить прослушиватель событий для каждого элемента. (Я попробовал код ответа Ахила Аравинда, и когда вы щелкаете элемент списка, все элементы исчезают. Возможно, ошибка)
4. Я просто сохраняю элементы в массиве и использую их для сокращения (не нужно писать дважды)

Answer 2

Это очень просто, так как вы добавляете свойство 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>