jQuery on Click函数中的if语句无法正常运行

Question

我试图让导航栏在移动网站上打开时下推页面内容。

我有一个单击事件侦听器，再加上一个切换功能，以及事件侦听器内部的if语句。

是否有任何if语句无法正常运行的原因？ 我注意到“ in”类实际上没有被切换； 而是在“阻止”和“无”之间切换显示。 现在，打开菜单时内容向下移动，而关闭菜单时内容不向上移动。 谢谢！

$('.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');
  }

});

编辑：

我从这个问题的最后一个答案中得到.toggle（'in'）部分： Bootstrap 3折叠菜单在单击时不会关闭

也许他打算使用.toggleClass。

Answer 1

如果尝试切换类，则应使用toggleClass方法： $('.navbar-collapse').toggleClass('in');

Answer 2

如果您使用的是引导程序，则应检查固定，静态，

默认菜单：下推内容

出现在内容上方： http : //getbootstrap.com/examples/navbar-static-top/

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

将内容下推： http : //getbootstrap.com/examples/navbar/

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

Answer 3

切换类，然后检查它是否在元素上会更容易： 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'});
  }

});