dropdowns.js

//SISTEMA DE DROPDOWNS

//Configurações dos dropdowns

//Argumentos
// [0] => (String) (Obrigatório) Título,
// [1] => (Boolean) (Default: false) Apenas Mobile,
// Para manter os valores padrões, adicione apenas o título no array $dropdowns
// Para modificar os valores padrões, adicione um array no array $dropdowns com as modificações

$dropdowns = [
    [
        "dropdown1", //Título
        true // Apenas Mobile
    ], //$dropdowns[0]
    "dropdown2", //$dropdowns[1]
    "dropdown3" //$dropdowns[2]
];

//Dropdowns que fecharão mediante scroll do usuário
$close_on_scroll = [ $dropdowns[1], $dropdowns[2] ];

//Adicionar classe "Submenu-dropdown--(nome do dropdown)" ao elemento que vai descer e subir
//Adicionar id "Dropdown-seta--(nome do dropdown)" ao ícone de seta que vai girar quando o menu for ativado

var global_submenu = ".Submenu-dropdown--"; // + droptitle
var global_seta = "#Dropdown-seta--"; // + droptitle

//AÇÕES

//Ações de dropdown

window.removeAllActives = function () {
    $(".seta-active").css("transform", "rotate(0deg)");
    $(".actived")
    .slideUp()
    .removeClass("actived");
}

window.OpenMenu = function (submenu, seta) {
    submenu.slideDown();
    removeAllActives();
    submenu.addClass("actived");
    seta.addClass("seta-active");
    seta.css("transform", "rotate(180deg)");
}

window.CloseMenu = function (submenu, seta) {
    submenu.slideUp();
    submenu.removeClass("actived");
    seta.removeClass("seta-active");
    seta.css("transform", "rotate(0deg)");
}

// EVENTOS

//Eventos de dropdown

$dropdowns.forEach(function(droptitle){
    if (Array.isArray(droptitle)) {
        var submenu = $(global_submenu + droptitle[0]);
        var seta = $(global_seta + droptitle[0]);
        if (is_not_ipad) {
            $("#Dropdown-" + droptitle[0]).click(function(event){
                if (submenu.hasClass("actived")){
                    CloseMenu(submenu, seta);
                }else{
                    OpenMenu(submenu, seta);
                }
            });
        }
    }else{
        var submenu = $(global_submenu + droptitle);
        var seta = $(global_seta + droptitle);
        $("#Dropdown-" + droptitle).click(function(event){
            if (submenu.hasClass("actived")){
                CloseMenu(submenu, seta);
            }else{
                OpenMenu(submenu, seta);
            }
        });
    }
});

$close_on_scroll.forEach(function(droptitle){
    var submenu = $(global_submenu + droptitle);
    var seta = $(global_seta + droptitle);

    $(window).on("scroll", function(){
        CloseMenu(submenu, seta);
    });
});

// APAGAR DROPDOWN MEDIANTE CLIQUE FORA DO BALÃO
// $("body").click(function(event){
//     console.log(event.target);
//     if (event.target.hasAttribute("click")) {
//         var click = event.target.getAttribute("click")
//     }else{
//         var click = "false";
//     }
//     if(click != "true"){
//         removeAllActives();
//     }
// });

// FIM DE DROPDOWNS