Function toggle menu does not work with data-attributes

Question

Function toggle menu does not work with data-attributes

Navigation

#1 by (1 votes)

2

I'm trying to make a function that causes the buttons to only change the data-attributes of the corresponding value menu, however, it does not display an error in the console, but it does not work either:

function menu(){
      var doc = document.documentElement;
      var openMenus = document.querySelectorAll("button[data-menu=open]");
      var closeMenus = document.querySelectorAll("button[data-menu=close]");
      var menus = document.querySelectorAll("ul[data-collapse=collapse-menu]");
      function openMenu(i){
        if(openMenus[i].dataset.menuId == i){
          menus[i].dataset.menuActive = "active";
          document.documentElement.dataset.menuActive="active";
        }
      }
      function closeMenu(i){
        if(closeMenus[i].dataset.menuId == i){
          menus[i].dataset.menuActive = "";
          document.documentElement.dataset.menuActive="";
        }
      }
      for(var i = 0; i < menus.length; i++){
        openMenus[i].onclick = openMenu(i);
        closeMenus[i].onclick = closeMenu(i);
      }
    }

/*Default Styles*/
*{
    margin:0;
    padding:0;
    text-decoration:none;
    color:inherit;
    background-color:transparent;
    box-sizing:border-box;
}
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0;
}
.container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    max-width:1480px;
    padding:8px 20px;
    margin:0 auto;
    position:relative;
}
nav{
    width:100%;
    display:flex;
    align-items:center;
}
.menu-button-holder{
    display:none;
}







/*Default Media Queries*/
/*Aqui viria uma media querie com min-width 1024px, removi para que pudessem testar na resolução do computador*/
    .menu-button-holder{
        display:inline-block;
    }
    ul[data-collapse="collapse-menu"]{
        position:absolute;
        min-height:100vh;
        top:0;
        left:-100%;
        padding:8px 0;
        background-color:#FFFFFF;
        width:90%;
        z-index:10;
        transition:all 1s ease-in-out;
    }
    html[data-menu-active="active"] ul[data-collapse="collapse-menu"][data-menu-active="active"]{
        left:0;
    }
    html[data-menu-active="active"]:before{
        content:"";
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-color:rgba(0,0,0,.4);
        z-index:5;
        opacity:0;
    }

<!DOCTYPE html>
<html lang="en" data-menu-active="">
<head>
</head>
<body>
    <div>
        <!-- Navbar -->
        <nav>
            <div class="container">
                <div>
                    <img src="" alt="logo">
                </div>
                <div class="menu-button-holder">
                    <button data-menu="open" data-menu-id="0"><span class="sr-only">Abrir menu</span><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#000000" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /></svg></button>
                </div>
                <ul data-collapse="collapse-menu" data-menu-id="0" data-menu-active="">
                    <div class="menu-button-holder">
                        <button data-menu="close" data-menu-id="0"><span class="sr-only">Fechar menu</span><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#000000" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg></button>
                    </div>
                    <li><a href="">Início</a></li>
                    <li><a href="">Serviços</a></li>
                    <li><a href="">Contato</a></li>
                </ul>
            </div>
        </nav>
        <!-- Main Content -->
        <div></div>
        <!-- Footer -->
        <div></div>
    </div>
</body>
</html>

I also tried using the setAttribute functions.

What's wrong? Why does it occur, and how can I resolve it?

javascript data-attribute

asked by anonymous 09.11.2017 / 19:13

1 answer

How to clean ListBox Limit characters and type of characters

score 1 · Accepted Answer

Well, after some time spent solving this problem, I came up with a solution to my problem. In this case, when printing i at certain points in the main function, it returned either a number, or an element according to the position of the element. fix the code using the following:

function menu(){
    //Declaração de variáveis
    var doc = document.documentElement;
    var openMenus = document.querySelectorAll("button[data-menu=open]");
    var closeMenus = document.querySelectorAll("button[data-menu=close]");
    var menus = document.querySelectorAll("ul[data-collapse=collapse-menu]");
    //Varrer o array de menus coletando suas id's e usando para as funções dos botões
    for(var i = 0; i < menus.length; i++){
        //Declaração da variável id para selecionar os menus corretamente
        openMenus[i].onclick = function(){
            var id = parseFloat(this.dataset.menuId)
            doc.setAttribute("data-menu-active", "active");
            menus[id].setAttribute("data-menu-active", "active");
            setTimeout(function(){
                doc.setAttribute("data-opacity", "1"); 
            },50);
        };
        closeMenus[i].onclick = function(){
            var id = parseFloat(this.dataset.menuId)
            doc.setAttribute("data-opacity", "0");
            menus[id].setAttribute("data-menu-active", "");
            setTimeout(function(){
                doc.setAttribute("data-menu-active", "");
            },600);
        };
    };
    //Fechar qualquer/todos os menus ao clicar no document-overlay
    doc.addEventListener("click", function(event){
        //document.documentElement apenas, filhos não são selecionados pela condição
        if(event.target === document.documentElement){
            var menusAtivos = document.querySelectorAll("ul[data-menu-active=active]");
            for(var i = 0; i < menusAtivos.length; i++){
                menusAtivos[i].setAttribute("data-menu-active", "");    
            };
            doc.setAttribute("data-opacity", "0");
            setTimeout(function(){
                doc.setAttribute("data-menu-active", "");
            },600);
        };
    });
}menu();

Why use i - 1 ? - Because the value returned by i always starts with 1, not 0, so we would not be able to use the first element of an array, and also changing the entire order of the menus;
Added the function to close any open menus by clicking on the side layer on the menu (% with% of% with%); This function can be used with any number of menus.