How to rewrite jQuery to JS?

JavaScript
1

Hi,

I created drop down menu with jQuery, but I would like to rewrite code into JS. I was trying by using JS HTML DOM EventListener, but the menu didn’t wanted to drop down.

Here is my jQuery code:

var toggleMenu = function() {
    $('.app_wrapper').toggleClass('active');
    $('#navigation_menu').toggle();
}

$('#navigation_menu').hide();
$('.app_wrapper').click(toggleMenu)

HTML:
<header id="app_navbar">
        <div class="app_wrapper" id="app_wrapper">
            <div class="burger_field">
                <span class="fa fa-bars burger fa-lg" aria-hidden="true"></span>
                <p class="menu_title">Dropdown menu</p>
                <span class="arrow"></span>
            </div>
        </div>
        <nav id="navigation_menu">
            <div class="menu-show">
                <ul class="menu_links">
                    <li class="home_link link"><span class="fa fa-home icons" aria-hidden="true"></span>Home</li>
                    <li class="messages_link link"><span class="fa fa-envelope-o icons" aria-hidden="true"></span>Messages</li>
                    <li class="settings_link link"><span class="fa fa-cog icons" aria-hidden="true"></span>Settings</li>
                </ul>
            </div>
        </nav>
    </header>

Can you give me some hints?
Thank you,
Megi

2

What does your code look like? It’s impossible to say what you’ve done wrong without seeing what you’ve done in the first place.

1 Like
3

The relevant changes should be:

CSS

.hide {
    display: none;
}

JavaScript

// $('.app_wrapper').toggleClass('active');
document.querySelectorAll(".app_wrapper").forEach(function (wrapper) {
    wrapper.classList.toggle("active");
});

// $('#navigation_menu').toggle();
document.querySelector("#navigation_menu").classList.toggle("hide");

// $('#navigation_menu').hide();
document.querySelector('#navigation_menu').classList.add("hide");

// $('.app_wrapper').click(toggleMenu)
document.querySelectorAll(".app_wrapper").forEach(function (wrapper) {
    wrapper.addEventListener("click", toggleMenu, false);
});

And move the script down to the end of the body, just before the </body> tag.

1 Like
4

In all, the full changes are (after I’ve tested them):

Add CSS code to let you easily hide elements:

<head>
    ...
    <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>

styles.css

.hide {
    display: none;
}

Move the script down to the end of the body, just before the <body> tag:

<body>
    ...
    <script type="text/javascript" src="js/script.js">
</body>

And replace the script with the following:

var toggleMenu = function () {
    document.querySelectorAll(".app_wrapper").forEach(function (wrapper) {
        wrapper.classList.toggle("active");
    });
    document.querySelector("#navigation_menu").classList.toggle("hide");
};

document.querySelector("#navigation_menu").classList.add("hide");
document.querySelectorAll(".app_wrapper").forEach(function (wrapper) {
    wrapper.addEventListener("click", toggleMenu, false);
});
3 Likes
5

Thank you a lot for the solution. I would prefer to get some hints, than full solution. I am going to find similar solution by myself ;).

Once again, thank you :wink:

3 Likes
6

It seems to me that you forgot to include a self invoking function, otherwise you would have to put your code at the end of your HTML. The thing is, elements don’t exist until the page is rendered, since your script is running before this happens, the .js has nothing to attach the handlers to. Adding a self invoking jquery function acts similarly to an “onload” in the BODY tag.

Hope that helps

  $(function() {
   ... your code goes here
}
2 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.