如果在 jQuery 中关于 Click 函数的语句没有正常运行

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 collapsed menu doesn't close on click

也许他打算使用 .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'});
  }

});