javascriptcssfunctiontoggleinline-styles

JavaScript remove Attribute or Property won"t work


The first step to open the menu works. But when i want to close it again it won't remove the inline style. Tried different ways to get the result but nothing of it will work.

CSS has just some text-properties for the alignment. ANd the class can-transform has following media query

That's all I can give as an information. Hope it is enough

// 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.log('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>


Solution

  • I figured it out.. I just had to put it into the right function.

    // 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.log('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';
        };