jQuery - using addClass on specific window width with toggleClass on same element

Question

i have a on resize add class jQuery function which help me show an element on a certain window size:

<div class="v-menu"></div>
<div id="menu">
    <a href="#">a</a>
    <a href="#">b</a>
    <a href="#">c</a>
</div>

(function($) {
        var $window = $(window),
            $html = $('#menu');
        function resize() {
            if ($window.width() < 612) {
                return $html.addClass('close');
            }
            else{
            $html.removeClass('close');
            $html.removeClass('open');
            $('*[class=""]').removeAttr('class');
            }
        }
        $window
            .resize(resize)
            .trigger('resize');
    })(jQuery);

and i can toggle it with another function:

$(".v-menu").click(function(){
$("#menu").toggleClass("open");
$("#menu").toggleClass("close");
});

the problem is if i toggle the element to open and then resize the window jQuery keep adding the close class to the element:

<div id="menu" class="open close">
    <a href="#">a</a>
    <a href="#">b</a>
    <a href="#">c</a>
</div>

how can i solve that?

What is it that you want to accomplish? Right now when you resize the window and the window width is lower than 612, .close will always be added — Niek Nijland
– Niek Nijland, Commented Feb 27, 2017 at 12:14
Seems likes something you could do with an @media query in css. Show/hide an element based on the window size. developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/… — fdomn-m
– fdomn-m, Commented Feb 27, 2017 at 12:14
@NiekNijland i dont want that close class add when the open class added. — ElectronSurf
– ElectronSurf, Commented Feb 27, 2017 at 12:16
Try: if ($window.width() < 612 && !$html.hassClass('open')) { — Niek Nijland
– Niek Nijland, Commented Feb 27, 2017 at 12:18
If you can sketch us an use case of what you are trying to accomplish maybe we can point you in another direction, because this doesn't really feel like a good solution of your problem :/ — Niek Nijland
– Niek Nijland, Commented Feb 27, 2017 at 12:19

hityagi · Accepted Answer · 2017-02-27 12:21:39Z

1

Based on your comment

i dont want that close class add when the open class added.

https://api.jquery.com/hasclass/

 if ($window.width() < 612){
         if(!$html.hasClass('open')) {
                  return $html.addClass('close');
         }
 }

answered Feb 27, 2017 at 12:21

hityagi

5,2561 gold badge26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery - using addClass on specific window width with toggleClass on same element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related