JS - How to toggle a CSS class only if it alerady has been toggled

I'm trying to build my own responsive mobile navigation. This is my first attempt but I've got pretty far. It works but I have a problem with proper toggling.

This is my code:

 function classToggle() {

      var navigation = document.querySelectorAll('.nav-links')

      navigation.forEach(nav => nav.classList.toggle('mobile-navigation'));

    }



    document.querySelector('.menu-toggle-button').addEventListener('click', classToggle);

    document.querySelector('.nav-links').addEventListener('click', classToggle);

nav {

    display: flex;

    position: absolute;

    width: 100%;

    padding: 1rem 2rem;

}



.nav-links {

    display: none;

}



.nav-links li {

    text-align: center;

    list-style-type: none;

    margin: 1.7em 0 0 0;

    padding: 0

}



nav,

.nav-links {

    flex-direction: column;



}



.menu-toggle-button {

    align-self: flex-end;

    position: absolute;

    margin-top: 1rem;

    cursor: pointer;

}



.mobile-navigation {

    display: flex;

    justify-content: center;

    background-color: black;

    margin: 0;

    padding: 0;

    position: absolute;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

}



@media (min-width: 992px) {



    /* Navigation */

    .mobile-navigation {

         flex-direction: row;

    }

    .nav-links {

        display: flex;

        margin-left: auto;

        height: auto;

        padding: 0;

    }



    .nav-links,

    nav {

        flex-direction: row;

    }



    .nav-links li {

        margin-top: 0;

        margin-left: 2.6em;

    }



    .menu-toggle-button {

        display: none;

    }

<nav class="navbar">

      <div class="brand">

        <p>Logo</p>

      </div>

      <div class="menu-toggle-button">

        <span>|||</span>

      </div>

      <ul class="nav-links">

        <li>

          <a href="javascript:void(0)">Risus Baulits</a>

        </li>

        <li>

          <a href="javascript:void(0)">Sodales Vapien</a>

        </li>

        <li>

          <a href="javascript:void(0)">Fermentum</a>

        </li>

        <li>

          <a href="javascript:void(0)">Posuere Risus!</a>

        </li>

      </ul>

    </nav>

https://codepen.io/anon/pen/MzJOrG

What I don't understand is how to add the click event to the menu only if it already has a class mobile-navigation so the class won't be toggled on bigger screen when the menu is a simple row of links. I don't want to use jQuery.

Thank you.

edited Nov 13 '18 at 14:31

asked Nov 13 '18 at 14:06

Jacek

116

add a comment |

I'm trying to build my own responsive mobile navigation. This is my first attempt but I've got pretty far. It works but I have a problem with proper toggling.

This is my code:

 function classToggle() {

      var navigation = document.querySelectorAll('.nav-links')

      navigation.forEach(nav => nav.classList.toggle('mobile-navigation'));

    }



    document.querySelector('.menu-toggle-button').addEventListener('click', classToggle);

    document.querySelector('.nav-links').addEventListener('click', classToggle);

nav {

    display: flex;

    position: absolute;

    width: 100%;

    padding: 1rem 2rem;

}



.nav-links {

    display: none;

}



.nav-links li {

    text-align: center;

    list-style-type: none;

    margin: 1.7em 0 0 0;

    padding: 0

}



nav,

.nav-links {

    flex-direction: column;



}



.menu-toggle-button {

    align-self: flex-end;

    position: absolute;

    margin-top: 1rem;

    cursor: pointer;

}



.mobile-navigation {

    display: flex;

    justify-content: center;

    background-color: black;

    margin: 0;

    padding: 0;

    position: absolute;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

}



@media (min-width: 992px) {



    /* Navigation */

    .mobile-navigation {

         flex-direction: row;

    }

    .nav-links {

        display: flex;

        margin-left: auto;

        height: auto;

        padding: 0;

    }



    .nav-links,

    nav {

        flex-direction: row;

    }



    .nav-links li {

        margin-top: 0;

        margin-left: 2.6em;

    }



    .menu-toggle-button {

        display: none;

    }

<nav class="navbar">

      <div class="brand">

        <p>Logo</p>

      </div>

      <div class="menu-toggle-button">

        <span>|||</span>

      </div>

      <ul class="nav-links">

        <li>

          <a href="javascript:void(0)">Risus Baulits</a>

        </li>

        <li>

          <a href="javascript:void(0)">Sodales Vapien</a>

        </li>

        <li>

          <a href="javascript:void(0)">Fermentum</a>

        </li>

        <li>

          <a href="javascript:void(0)">Posuere Risus!</a>

        </li>

      </ul>

    </nav>

https://codepen.io/anon/pen/MzJOrG

Thank you.

edited Nov 13 '18 at 14:31

asked Nov 13 '18 at 14:06

Jacek

116

add a comment |

I'm trying to build my own responsive mobile navigation. This is my first attempt but I've got pretty far. It works but I have a problem with proper toggling.

This is my code:

 function classToggle() {

      var navigation = document.querySelectorAll('.nav-links')

      navigation.forEach(nav => nav.classList.toggle('mobile-navigation'));

    }



    document.querySelector('.menu-toggle-button').addEventListener('click', classToggle);

    document.querySelector('.nav-links').addEventListener('click', classToggle);

nav {

    display: flex;

    position: absolute;

    width: 100%;

    padding: 1rem 2rem;

}



.nav-links {

    display: none;

}



.nav-links li {

    text-align: center;

    list-style-type: none;

    margin: 1.7em 0 0 0;

    padding: 0

}



nav,

.nav-links {

    flex-direction: column;



}



.menu-toggle-button {

    align-self: flex-end;

    position: absolute;

    margin-top: 1rem;

    cursor: pointer;

}



.mobile-navigation {

    display: flex;

    justify-content: center;

    background-color: black;

    margin: 0;

    padding: 0;

    position: absolute;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

}



@media (min-width: 992px) {



    /* Navigation */

    .mobile-navigation {

         flex-direction: row;

    }

    .nav-links {

        display: flex;

        margin-left: auto;

        height: auto;

        padding: 0;

    }



    .nav-links,

    nav {

        flex-direction: row;

    }



    .nav-links li {

        margin-top: 0;

        margin-left: 2.6em;

    }



    .menu-toggle-button {

        display: none;

    }

<nav class="navbar">

      <div class="brand">

        <p>Logo</p>

      </div>

      <div class="menu-toggle-button">

        <span>|||</span>

      </div>

      <ul class="nav-links">

        <li>

          <a href="javascript:void(0)">Risus Baulits</a>

        </li>

        <li>

          <a href="javascript:void(0)">Sodales Vapien</a>

        </li>

        <li>

          <a href="javascript:void(0)">Fermentum</a>

        </li>

        <li>

          <a href="javascript:void(0)">Posuere Risus!</a>

        </li>

      </ul>

    </nav>

https://codepen.io/anon/pen/MzJOrG

Thank you.

edited Nov 13 '18 at 14:31

asked Nov 13 '18 at 14:06

Jacek

116

I'm trying to build my own responsive mobile navigation. This is my first attempt but I've got pretty far. It works but I have a problem with proper toggling.

This is my code:

 function classToggle() {

      var navigation = document.querySelectorAll('.nav-links')

      navigation.forEach(nav => nav.classList.toggle('mobile-navigation'));

    }



    document.querySelector('.menu-toggle-button').addEventListener('click', classToggle);

    document.querySelector('.nav-links').addEventListener('click', classToggle);

nav {

    display: flex;

    position: absolute;

    width: 100%;

    padding: 1rem 2rem;

}



.nav-links {

    display: none;

}



.nav-links li {

    text-align: center;

    list-style-type: none;

    margin: 1.7em 0 0 0;

    padding: 0

}



nav,

.nav-links {

    flex-direction: column;



}



.menu-toggle-button {

    align-self: flex-end;

    position: absolute;

    margin-top: 1rem;

    cursor: pointer;

}



.mobile-navigation {

    display: flex;

    justify-content: center;

    background-color: black;

    margin: 0;

    padding: 0;

    position: absolute;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

}



@media (min-width: 992px) {



    /* Navigation */

    .mobile-navigation {

         flex-direction: row;

    }

    .nav-links {

        display: flex;

        margin-left: auto;

        height: auto;

        padding: 0;

    }



    .nav-links,

    nav {

        flex-direction: row;

    }



    .nav-links li {

        margin-top: 0;

        margin-left: 2.6em;

    }



    .menu-toggle-button {

        display: none;

    }

<nav class="navbar">

      <div class="brand">

        <p>Logo</p>

      </div>

      <div class="menu-toggle-button">

        <span>|||</span>

      </div>

      <ul class="nav-links">

        <li>

          <a href="javascript:void(0)">Risus Baulits</a>

        </li>

        <li>

          <a href="javascript:void(0)">Sodales Vapien</a>

        </li>

        <li>

          <a href="javascript:void(0)">Fermentum</a>

        </li>

        <li>

          <a href="javascript:void(0)">Posuere Risus!</a>

        </li>

      </ul>

    </nav>

https://codepen.io/anon/pen/MzJOrG

Thank you.

 function classToggle() {

      var navigation = document.querySelectorAll('.nav-links')

      navigation.forEach(nav => nav.classList.toggle('mobile-navigation'));

    }



    document.querySelector('.menu-toggle-button').addEventListener('click', classToggle);

    document.querySelector('.nav-links').addEventListener('click', classToggle);

nav {

    display: flex;

    position: absolute;

    width: 100%;

    padding: 1rem 2rem;

}



.nav-links {

    display: none;

}



.nav-links li {

    text-align: center;

    list-style-type: none;

    margin: 1.7em 0 0 0;

    padding: 0

}



nav,

.nav-links {

    flex-direction: column;



}



.menu-toggle-button {

    align-self: flex-end;

    position: absolute;

    margin-top: 1rem;

    cursor: pointer;

}



.mobile-navigation {

    display: flex;

    justify-content: center;

    background-color: black;

    margin: 0;

    padding: 0;

    position: absolute;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

}



@media (min-width: 992px) {



    /* Navigation */

    .mobile-navigation {

         flex-direction: row;

    }

    .nav-links {

        display: flex;

        margin-left: auto;

        height: auto;

        padding: 0;

    }



    .nav-links,

    nav {

        flex-direction: row;

    }



    .nav-links li {

        margin-top: 0;

        margin-left: 2.6em;

    }



    .menu-toggle-button {

        display: none;

    }

<nav class="navbar">

      <div class="brand">

        <p>Logo</p>

      </div>

      <div class="menu-toggle-button">

        <span>|||</span>

      </div>

      <ul class="nav-links">

        <li>

          <a href="javascript:void(0)">Risus Baulits</a>

        </li>

        <li>

          <a href="javascript:void(0)">Sodales Vapien</a>

        </li>

        <li>

          <a href="javascript:void(0)">Fermentum</a>

        </li>

        <li>

          <a href="javascript:void(0)">Posuere Risus!</a>

        </li>

      </ul>

    </nav>

 function classToggle() {

      var navigation = document.querySelectorAll('.nav-links')

      navigation.forEach(nav => nav.classList.toggle('mobile-navigation'));

    }



    document.querySelector('.menu-toggle-button').addEventListener('click', classToggle);

    document.querySelector('.nav-links').addEventListener('click', classToggle);

nav {

    display: flex;

    position: absolute;

    width: 100%;

    padding: 1rem 2rem;

}



.nav-links {

    display: none;

}



.nav-links li {

    text-align: center;

    list-style-type: none;

    margin: 1.7em 0 0 0;

    padding: 0

}



nav,

.nav-links {

    flex-direction: column;



}



.menu-toggle-button {

    align-self: flex-end;

    position: absolute;

    margin-top: 1rem;

    cursor: pointer;

}



.mobile-navigation {

    display: flex;

    justify-content: center;

    background-color: black;

    margin: 0;

    padding: 0;

    position: absolute;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

}



@media (min-width: 992px) {



    /* Navigation */

    .mobile-navigation {

         flex-direction: row;

    }

    .nav-links {

        display: flex;

        margin-left: auto;

        height: auto;

        padding: 0;

    }



    .nav-links,

    nav {

        flex-direction: row;

    }



    .nav-links li {

        margin-top: 0;

        margin-left: 2.6em;

    }



    .menu-toggle-button {

        display: none;

    }

<nav class="navbar">

      <div class="brand">

        <p>Logo</p>

      </div>

      <div class="menu-toggle-button">

        <span>|||</span>

      </div>

      <ul class="nav-links">

        <li>

          <a href="javascript:void(0)">Risus Baulits</a>

        </li>

        <li>

          <a href="javascript:void(0)">Sodales Vapien</a>

        </li>

        <li>

          <a href="javascript:void(0)">Fermentum</a>

        </li>

        <li>

          <a href="javascript:void(0)">Posuere Risus!</a>

        </li>

      </ul>

    </nav>

javascript css toggle navbar

edited Nov 13 '18 at 14:31

asked Nov 13 '18 at 14:06

Jacek

116

edited Nov 13 '18 at 14:31

asked Nov 13 '18 at 14:06

Jacek

116

edited Nov 13 '18 at 14:31

asked Nov 13 '18 at 14:06

Jacek

116

asked Nov 13 '18 at 14:06

Jacek

116

asked Nov 13 '18 at 14:06

Jacek

116

add a comment |

1 Answer
1

active

oldest

votes

The concept is use CSS media queryto show/Hide the toggle button depending on the viewport size(windows size),
for instance:

//hide the toggle button

.menu-toggle-button {

  display: none

}

//show the toggle button if window size is less than 768 

@media only screen and (max-width: 768px) {

   display: block

}

in this way the button will not show on desktop as the click event also

answered Nov 13 '18 at 14:27

Taha Azzabi

579515

It's not the button causing problems, the links are. Go to codepen.io/anon/pen/MzJOrG and click any link.

– Jacek
Nov 13 '18 at 14:31

i see because you have this event listener, juste remove it document.querySelector('.nav-links').addEventListener('click', classToggle) you only need and event click on button, but you still need the css part

– Taha Azzabi
Nov 13 '18 at 14:39

If I do that the menu will not collapse after a link will be clicked or touched.

– Jacek
Nov 13 '18 at 14:44

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53282827%2fjs-how-to-toggle-a-css-class-only-if-it-alerady-has-been-toggled%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

The concept is use CSS media queryto show/Hide the toggle button depending on the viewport size(windows size),
for instance:

//hide the toggle button

.menu-toggle-button {

  display: none

}

//show the toggle button if window size is less than 768 

@media only screen and (max-width: 768px) {

   display: block

}

in this way the button will not show on desktop as the click event also

answered Nov 13 '18 at 14:27

Taha Azzabi

579515

It's not the button causing problems, the links are. Go to codepen.io/anon/pen/MzJOrG and click any link.

– Jacek
Nov 13 '18 at 14:31

i see because you have this event listener, juste remove it document.querySelector('.nav-links').addEventListener('click', classToggle) you only need and event click on button, but you still need the css part

– Taha Azzabi
Nov 13 '18 at 14:39

If I do that the menu will not collapse after a link will be clicked or touched.

– Jacek
Nov 13 '18 at 14:44

add a comment |

The concept is use CSS media queryto show/Hide the toggle button depending on the viewport size(windows size),
for instance:

//hide the toggle button

.menu-toggle-button {

  display: none

}

//show the toggle button if window size is less than 768 

@media only screen and (max-width: 768px) {

   display: block

}

in this way the button will not show on desktop as the click event also

answered Nov 13 '18 at 14:27

Taha Azzabi

579515

It's not the button causing problems, the links are. Go to codepen.io/anon/pen/MzJOrG and click any link.

– Jacek
Nov 13 '18 at 14:31

i see because you have this event listener, juste remove it document.querySelector('.nav-links').addEventListener('click', classToggle) you only need and event click on button, but you still need the css part

– Taha Azzabi
Nov 13 '18 at 14:39

If I do that the menu will not collapse after a link will be clicked or touched.

– Jacek
Nov 13 '18 at 14:44

add a comment |

The concept is use CSS media queryto show/Hide the toggle button depending on the viewport size(windows size),
for instance:

//hide the toggle button

.menu-toggle-button {

  display: none

}

//show the toggle button if window size is less than 768 

@media only screen and (max-width: 768px) {

   display: block

}

in this way the button will not show on desktop as the click event also

answered Nov 13 '18 at 14:27

Taha Azzabi

579515

The concept is use CSS media queryto show/Hide the toggle button depending on the viewport size(windows size),
for instance:

//hide the toggle button

.menu-toggle-button {

  display: none

}

//show the toggle button if window size is less than 768 

@media only screen and (max-width: 768px) {

   display: block

}

in this way the button will not show on desktop as the click event also

answered Nov 13 '18 at 14:27

Taha Azzabi

579515

answered Nov 13 '18 at 14:27

Taha Azzabi

579515

answered Nov 13 '18 at 14:27

Taha Azzabi

579515

answered Nov 13 '18 at 14:27

Taha Azzabi

579515

It's not the button causing problems, the links are. Go to codepen.io/anon/pen/MzJOrG and click any link.

– Jacek
Nov 13 '18 at 14:31

i see because you have this event listener, juste remove it document.querySelector('.nav-links').addEventListener('click', classToggle) you only need and event click on button, but you still need the css part

– Taha Azzabi
Nov 13 '18 at 14:39

If I do that the menu will not collapse after a link will be clicked or touched.

– Jacek
Nov 13 '18 at 14:44

add a comment |

It's not the button causing problems, the links are. Go to codepen.io/anon/pen/MzJOrG and click any link.

– Jacek
Nov 13 '18 at 14:31

i see because you have this event listener, juste remove it document.querySelector('.nav-links').addEventListener('click', classToggle) you only need and event click on button, but you still need the css part

– Taha Azzabi
Nov 13 '18 at 14:39

If I do that the menu will not collapse after a link will be clicked or touched.

– Jacek
Nov 13 '18 at 14:44

It's not the button causing problems, the links are. Go to codepen.io/anon/pen/MzJOrG and click any link.

– Jacek
Nov 13 '18 at 14:31

i see because you have this event listener, juste remove it document.querySelector('.nav-links').addEventListener('click', classToggle) you only need and event click on button, but you still need the css part

– Taha Azzabi
Nov 13 '18 at 14:39

If I do that the menu will not collapse after a link will be clicked or touched.

– Jacek
Nov 13 '18 at 14:44

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky