Первый шаг по открытию меню работает. Но когда я захочу закрыть его снова, встроенный стиль не будет удален. Пробовал разные способы получить результат, но ничего не помогло.
CSS имеет лишь некоторые свойства текста для выравнивания. И класс can-transform имеет следующий медиа-запрос
Это все, что я могу дать в качестве информации. Надеюсь, этого достаточно
// Responsive Header
(function(window, document) {
let menu = document.getElementById('menu'),
rollback,
WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange' : 'resize';
function toggleHorizontal() {
menu.classList.remove('closing');
[].forEach.call(
document.getElementById('menu').querySelectorAll('.can-transform'),
function(el) {
el.classList.toggle('pure-menu-horizontal');
}
);
};
function toggleMenu() {
// set timeout so that the panel has a chance to roll up
// before the menu switches states
if (menu.classList.contains('open')) {
menu.classList.add('closing');
document.getElementById('tutu').removeProperty('display');
document.getElementById('tututu').removeProperty('display');
console.info('ZOINK')
rollBack = setTimeout(toggleHorizontal, 500);
} else {
if (menu.classList.contains('closing')) {
clearTimeout(rollBack);
} else {
toggleHorizontal();
}
}
menu.classList.toggle('open');
document.getElementById('toggle').classList.toggle('x');
document.getElementById('tutu').style.display = 'block';
document.getElementById('tututu').style.display = 'block';
};
function closeMenu() {
if (menu.classList.contains('open')) {
toggleMenu();
}
}
document.getElementById('toggle').addEventListener('click', function(e) {
toggleMenu();
e.preventDefault();
});
window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
})(this, this.document);.can-transform {
display: none;
}<div class = "pure-g main-menu" id = "menu">
<div class = "pure-u-1 pure-u-sm-1 pure-u-md-1-4 pure-u-lg-1-4">
<div class = "pure-menu-heading">
<a href = "/" class = "pure-menu-heading">
<img class = "hdr-logo" src = "/layout/local/public/img/new_logo.gif">
</a>
<a href = "#" class = "hamburger" id = "toggle"><s class = "bar"></s><s class = "bar"></s><s class = "bar"></s></a>
</div>
</div>
<div class = "pure-u-1 pure-u-sm-1-4 pure-u-md-1-3 pure-u-lg-1-4">
<div class = "pure-menu-horizontal can-transform" id = "tutu">
<ul class = "pure-menu-list">
<li class = "pure-menu-item"><a href = "/project/upload" class = "pure-menu-link">Projekt erstellen</a></li>
<li class = "pure-menu-item"><a href = "/projects" class = "pure-menu-link">Ihre Projekte</a></li>
<li class = "pure-menu-item"><a href = "/help" class = "pure-menu-link">Technische Hilfe</a></li>
</ul>
</div>
</div>
<div class = "pure-u-1 pure-u-sm-1-4 pure-u-md-1-3 pure-u-lg-1-3 main-menu-right">
<div class = "pure-menu-horizontal can-transform" id = "tututu">
<ul class = "pure-menu-list">
<li class = "pure-menu-item">
<select id = "language-select" onchange = "setLanguage()">
<option value = "en">🇺🇸 English</option>
<option value = "de" selected = "">🇩🇪 Deutsch</option>
</select>
</li>
<li title = "Kundenbereich" class = "pure-menu-item">
<a href = "/account" class = "pure-menu-link">
<svg class = "svg-inline--fa fa-user fa-w-14" aria-hidden = "true" focusable = "false" data-prefix = "far" data-icon = "user" role = "img" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 448 512" data-fa-i2svg = ""><path fill = "currentColor" d = "M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"></path></svg>
<!-- <i class = "far fa-user"></i> Font Awesome fontawesome.com -->
</a>
</li>
<li class = "pure-menu-item">
<a title = "Logout" href = "/logout" class = "pure-menu-link">
<svg class = "svg-inline--fa fa-sign-out-alt fa-w-16" aria-hidden = "true" focusable = "false" data-prefix = "fas" data-icon = "sign-out-alt" role = "img" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 512 512" data-fa-i2svg = ""><path fill = "currentColor" d = "M497 273L329 441c-15 15-41 4.5-41-17v-96H152c-13.3 0-24-10.7-24-24v-96c0-13.3 10.7-24 24-24h136V88c0-21.4 25.9-32 41-17l168 168c9.3 9.4 9.3 24.6 0 34zM192 436v-40c0-6.6-5.4-12-12-12H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h84c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12H96c-53 0-96 43-96 96v192c0 53 43 96 96 96h84c6.6 0 12-5.4 12-12z"></path></svg>
<!-- <i class = "fas fa-sign-out-alt"></i> Font Awesome fontawesome.com -->
</a>
</li>
</ul>
</div>
</div>
</div>Я не вижу кода, который пытается удалить встроенные стили. Что это за атрибуты отображения?
@RoryMcCrossan теперь просто выдает ошибку: document.getElementById(...).removeProperty не является функцией
Я не вносил никаких изменений в ваш код. Все, что я сделал, это поместил его в исполняемый фрагмент. К сожалению, он все еще не работает должным образом - я предполагаю, что часть кода отсутствует.
document.getElementById('tutu').removeProperty('display') — в этом мало смысла; HTML-элементы не имеют свойства display. Свойство элемента, которое вы используете при работе со встроенными стилями, — style. Почему вы вообще пытаетесь что-то сделать со встроенными стилями? Эти части также должны быть основаны на установке/удалении классов.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Я понял.. Мне просто нужно было поместить его в правильную функцию.
// Responsive Header
(function (window, document) {
let menu = document.getElementById('menu'),
rollback,
WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange' : 'resize';
function toggleHorizontal() {
menu.classList.remove('closing');
[].forEach.call(
document.getElementById('menu').querySelectorAll('.can-transform'),
function (el) {
el.classList.toggle('pure-menu-horizontal');
document.getElementById('tututu').style.display = '';
document.getElementById('tutu').style.display = 'none';
}
);
};
function toggleMenu() {
// set timeout so that the panel has a chance to roll up
// before the menu switches states
if (menu.classList.contains('open')) {
menu.classList.add('closing');
console.info('ZOINK')
rollBack = setTimeout(toggleHorizontal, 500);
} else {
if (menu.classList.contains('closing')) {
clearTimeout(rollBack);
} else {
toggleHorizontal();
}
}
menu.classList.toggle('open');
document.getElementById('toggle').classList.toggle('x');
document.getElementById('tutu').style.display = 'block';
document.getElementById('tututu').style.display = 'block';
};
Можете ли вы отредактировать вопрос, включив в него полный рабочий пример со всеми соответствующими HTML, JS и CSS. Гораздо проще отлаживать проблемы, которые мы можем воспроизвести.