CODEWITHSUNDEEP
javascriptjqueryhtml
Dan
Dan

Reputation: 41

How remove class when I resize screen?

I need that on small devices (<992px) there was a class foot-active. And when we clicked on link "More" on large devices (>992px), class foot-active was not added as of now. I wrote function on resize, but it isn't work right. What's amiss?..................................................

if (jQuery(window).width() < 992) {
  $(document).on('click', '.foot-title', function(e) {
    if ($(this).parent().hasClass('foot-items')) {
      $(this).parent().toggleClass('foot-active');
    }
  });
}

jQuery(window).bind('resize', function() {
  $(document).on('click', '.foot-title', function(e) {
    if ($(this).parent().hasClass('foot-items')) {
      $(this).parent().toggleClass('foot-active');
    }
  });
});
html,
body {
  margin: 0;
  padding: 0;
}

.link {
  text-decoration: none;
  color: #ddd;
}

.menu {
  display: none;
}

.foot-active .menu {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foot-menu foot-items">
  <div class="foot-title">
    <a href="#">More</a>
  </div>
  <div class="menu">
    <div class="menu-item">
      <a href="#"><span class="link">Lorem 1</span></a>
    </div>
    <div class="menu-item">
      <a href="#"><span class="link">Lorem 1</span></a>
    </div>
    <div class="menu-item">
      <a href="#"><span class="link">Lorem 1</span></a>
    </div>
  </div>
  <!-- .b-menu -->
</div>

<div class="foot-menu">
  <div class="foot-title">
    <a href="#">Link</a>
  </div>
</div>

Upvotes: 0

Views: 87

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337550

When amending the UI for different viewport sizes you should use CSS Media Queries, not JS. They perform much better and make your JS code much simpler and semantic, not to mention the fact that the UI will not be broken if a user disables JS in their browser.

To achieve what you need you can have your jQuery code always toggle the class. You can then set the CSS to allow the class to affect the UI through a Media Query, something like this:

$(document).on('click', '.foot-title', function(e) {
  $(this).closest('.foot-menu').toggleClass('foot-active');
});
html,
body {
  margin: 0;
  padding: 0;
}

.link {
  text-decoration: none;
  color: #ddd;
}

.menu {
  display: none;
}

@media (max-width: 992px) {
  .foot-active .menu {
    display: block;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foot-menu foot-items">
  <div class="foot-title">
    <a href="#">More</a>
  </div>
  <div class="menu">
    <div class="menu-item">
      <a href="#"><span class="link">Lorem 1</span></a>
    </div>
    <div class="menu-item">
      <a href="#"><span class="link">Lorem 1</span></a>
    </div>
    <div class="menu-item">
      <a href="#"><span class="link">Lorem 1</span></a>
    </div>
  </div>
</div>

<div class="foot-menu">
  <div class="foot-title">
    <a href="#">Link</a>
  </div>
</div>

Upvotes: 2

Related Questions