javascript - 如何在做出选择之前保持导航栏切换打开

Question

当我正在工作的网站切换到移动设备时，它有一个很长的下拉菜单。对于我的一生，我无法让这个下拉导航栏切换保持打开状态。它当前所做的就是打开以显示所有选择，然后它会快速显示仅显示一个可能的选择。这是一个可滚动的菜单，但我希望它保持打开状态直到被单击......任何人都可以看到我做错了什么吗？

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
  if ($(".navbar").offset().top > 50) {
    $(".navbar-fixed-top").addClass("top-nav-collapse");
  } else {
    $(".navbar-fixed-top").removeClass("top-nav-collapse");
  }
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
  $('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
      scrollTop: $($anchor.attr('href')).offset().top
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
  });
});


// Only enable if the document has a long scroll bar
// Note the window height + offset
if (($(window).height() + 100) < $(document).height()) {
  $('#top-link-block').removeClass('hidden').affix({
    // how far to scroll down before link "slides" into view
    offset: {
      top: 100
    }
  });
}

//Fade in for well-trigger on index.html
var divs = $('.well-trigger');
$(window).scroll(function() {
  if ($(window).scrollTop() < 480) {
    divs.stop(true, true).fadeIn("slow");
  } else {
    divs.stop(true, true).fadeOut("slow");
  }
});

.navbar {
  font-family: 'Contrail One', cursive;
  padding: 10px;
  font-size: 18px;
  -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
  -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
  transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.navbar-brand {
  padding-top: 5px;
}
.navbar-toggle {
  margin: 10px 0;
}
.navbar-inverse {
  background-color: #000011;
}
.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
  height: 80px;
  line-height: 80px;
  padding-left: 5px;
  padding-right: 5px;
}
.navbar-nav li a {
  padding-top: 0;
  padding-bottom: 0;
  margin: 0px -5px 0px -5px;
}
@media (max-width: 767px) {
  .navbar-brand {
    padding: 0px;
  }
  .navbar-brand img {
    margin-top: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
  }
  .navbar-nav,
  .navbar-nav li,
  .navbar-nav li a {
    height: 50px;
    line-height: 50px;
    padding-left: 5px;
    padding-right: 5px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="http://www.example.com/testing/index.html">
        <div class="navbar-brand navbar-brand-left">
          <img class="hidden-xs" src="img/logo_transparent_REG.png" alt="">
          <img class="visible-xs" src="img/logo_transparent_XS.png" alt="">
        </div>
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav navbar-right">
        <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
        <li class="hidden">
          <a class="page-scroll" href="#page-top"></a>
        </li>
        <li>
          <a href="http://www.example.com/testing/courses.html">REGISTRATION</a>
        </li>
        <li>
          <a href="http://www.example.com/testing/overview.html">COURSE OVERVIEW</a>
        </li>
        <li>
          <a href="http://www.example.com/testing/services.html">SERVICES</a>
        </li>
        <li>
          <a href="http://www.example.com/testing/instructors.html">INSTRUCTORS</a>
        </li>
        <li>
          <a href="http://www.example.com/testing/blog.html">BLOG</a>
        </li>
        <li>
          <a href="http://www.example.com/testing/contact.html">CONTACT</a>
        </li>
        <li>
          <a href="http://www.example.com/testing/links.html">LINKS</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>

</nav>

Answer 1

您已在 @media-query 中将高度设置为 50px。将其更改为auto，一切顺利。

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
  if ($(".navbar").offset().top > 50) {
    $(".navbar-fixed-top").addClass("top-nav-collapse");
  } else {
    $(".navbar-fixed-top").removeClass("top-nav-collapse");
  }
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
  $('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
      scrollTop: $($anchor.attr('href')).offset().top
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
  });
});


// Only enable if the document has a long scroll bar
// Note the window height + offset
if (($(window).height() + 100) < $(document).height()) {
  $('#top-link-block').removeClass('hidden').affix({
    // how far to scroll down before link "slides" into view
    offset: {
      top: 100
    }
  });
}

//Fade in for well-trigger on index.html
var divs = $('.well-trigger');
$(window).scroll(function() {
  if ($(window).scrollTop() < 480) {
    divs.stop(true, true).fadeIn("slow");
  } else {
    divs.stop(true, true).fadeOut("slow");
  }
});

.navbar {
  font-family: 'Contrail One', cursive;
  padding: 10px;
  font-size: 18px;
  -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
  -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
  transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.navbar-brand {
  padding-top: 5px;
}
.navbar-toggle {
  margin: 10px 0;
}
.navbar-inverse {
  background-color: #000011;
}
.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
  height: 80px;
  line-height: 80px;
  padding-left: 5px;
  padding-right: 5px;
}
.navbar-nav li a {
  padding-top: 0;
  padding-bottom: 0;
  margin: 0px -5px 0px -5px;
}
@media (max-width: 767px) {
  .navbar-brand {
    padding: 0px;
  }
  .navbar-brand img {
    margin-top: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
  }
  .navbar-nav,
  .navbar-nav li,
  .navbar-nav li a {
    height: auto;
    line-height: 50px;
    padding-left: 5px;
    padding-right: 5px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="http://www.example.com/testing/index.html">
        <div class="navbar-brand navbar-brand-left">
          <img class="hidden-xs" src="img/logo_transparent_REG.png" alt="">
          <img class="visible-xs" src="img/logo_transparent_XS.png" alt="">
        </div>
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav navbar-right">
        <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
        <li class="hidden">
          <a class="page-scroll" href="#page-top"></a>
        </li>
        <li>
          <a href="http://www.example.com/testing/courses.html">REGISTRATION</a>
        </li>
        <li>
          <a href="http://www.example.com/testing/overview.html">COURSE OVERVIEW</a>
        </li>
        <li>
          <a href="http://www.example.com/testing/services.html">SERVICES</a>
        </li>
        <li>
          <a href="http://www.example.com/testing/instructors.html">INSTRUCTORS</a>
        </li>
        <li>
          <a href="http://www.example.com/testing/blog.html">BLOG</a>
        </li>
        <li>
          <a href="http://www.example.com/testing/contact.html">CONTACT</a>
        </li>
        <li>
          <a href="http://www.example.com/testing/links.html">LINKS</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>

</nav>