如何保持导航栏切换开启，直到选择

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

您已在@媒体查询将高度设置为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>