Question

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

我在事件监听器中有一个click事件监听器，一个toggle函数和一个if语句。

if语句是否运行不正常？我注意到了＆＃39; in＆＃39;班级实际上没有被切换;相反，显示屏正在“块”之间切换。并且没有＆＃39;。现在，当菜单打开时，内容会向下移动，但在关闭时不会向上移动。谢谢！

$('.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（＆＃39; in＆＃39;）部分：Bootstrap 3 collapsed menu doesn't close on click

也许他打算使用.toggleClass。

Answer 1

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

Answer 2

如果你使用bootstrap，你应该检查固定的不同下拉菜单的链接，静态，

默认菜单：向下推送内容

来自内容：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'});
  }

});

如果jQuery上的语句在Click函数上运行不正常

3 个答案: