If statement within jQuery on Click function not running properly

Question

I'm trying to get the navigation bar to push down the page content when opened on the mobile site.

I have a click event listener, plus a toggle function, and an if statement inside the event listener.

Is there any reason the if statement isn't running properly? I noticed the 'in' class isn't actually being toggled; rather, the display is being toggled between 'block' and 'none'. Right now, the content shifts down when the menu is opened, but doesn't shift back up when it's closed. Thanks!

$('.navbar-toggle').click(function(event) {
  $('.navbar-collapse').toggle('in');

  if ($(".navbar-collapse").is(":hidden")) {
    $('.content-below').css('margin-top','0px');
  }
  else if ($(".navbar-collapse").is(":visible")) {
    $('.content-below').css('margin-top','200px');
  }

});

EDIT:

I got the .toggle('in') portion from the last answer in this question: Bootstrap 3 collapsed menu doesn't close on click

Perhaps he meant to use .toggleClass.

Look at the documentation for `.toggle()`: http://api.jquery.com/toggle/. I think you want `.toggleClass()` instead. Also, rather than checking if an element is hidden you could check for the existance of the `.in` class. — Jasper, Sep 30 '14 at 16:53

score 0 · Answer 1 · answered Sep 30 '14 at 16:57

0

If you are trying to toggle the class you should use the toggleClass method: $('.navbar-collapse').toggleClass('in');

answered Sep 30 '14 at 16:57

lfac

17
4

score 0 · Answer 2 · answered Sep 30 '14 at 17:17

if you are using bootstrap you should check the links of different dropdowns menus fixed, static,

default menus : pushes the content down

comes over the content : http://getbootstrap.com/examples/navbar-static-top/

<div class="navbar navbar-default navbar-fixed-top" role="navigation">

pushes the content down : http://getbootstrap.com/examples/navbar/

<div class="navbar navbar-default navbar-static-top" role="navigation">

JRulle · Accepted Answer · 2014-09-30T17:10:35.870

-1

Toggling the class, then checking if it is on the element would be easier: DEMO

$('.navbar-toggle').on("click", function(event) {

  $('.navbar-collapse').toggleClass('in');

  if ($(".navbar-collapse").hasClass('in')) {
      $('.navbar-collapse').slideToggle();
      $('.content-below').animate({'margin-top':'200px'});
  }
  else {
      $('.navbar-collapse').slideToggle();
      $('.content-below').animate({'margin-top':'0px'});
  }

});

edited Sep 30 '14 at 17:10

answered Sep 30 '14 at 17:02

JRulle

7,448
6
39
61

Thanks. This works well if I click the button more than two times. The first time I click it, nothing happens. The second time, the menu drops down over the content. After that, everything works. Any way around that? – Sep 30 '14 at 17:31
I am not experiencing the same issue, what browser are you using? If you can get your issue to reproduce in the JSfiddle I can help from there. – JRulle Sep 30 '14 at 17:34
Sorry, I couldn't get it to work on JSfiddle. I'm using Chrome, but accessing the site through a Vagrant development environment. I actually flipped your margin-top values to get my above result. If I were to keep your code as is, here are the results: The first time I click, the menu won't drop down (class "in" is not added to .navbar-collapse), but the content is shifted downwards. On the second click, the menu drops down (class "in" is added), and the content stays in the downward position. On the third click, the menu drops down again, and the content is shifted up (now overlapping). – Sep 30 '14 at 18:08
After the third click, everything works backwards: clicking toggles between the menu down and content up, or the menu gone and content shifted down. This is why I had switched the values initially. Sorry for the long explanation. – Sep 30 '14 at 18:10
Is your menu visible initially or hidden on page load? – JRulle Sep 30 '14 at 18:12
Initially hidden. Once the bootstrap button is clicked, the menu drops down. – Sep 30 '14 at 18:13
Can you share styles that are being applied to the relevant html elements (`.navbar-collapse`, `.in`, `.content-below`)? Additionally, if your `.navbar-collapse` also has a class like `.navbar` or something else applying styles to it, that could be affecting what is going on. Last resort, can you share a link to the page on some sort of test environment? – JRulle Sep 30 '14 at 18:17
There was something linked to the class "in". Once I renamed it, everything worked. Finally got it straightened out. Thanks for all your help! – Oct 06 '14 at 15:26

If statement within jQuery on Click function not running properly

3 Answers3