Question

我是Bootstrap，jquery和javascript的新手，并且我正在一个网站上工作，我只遇到一个问题。。。我需要顶部的导航栏以折叠状态加载到“超小型”屏幕上。现在，该条形图在XS屏幕上变为垂直，但是我希望它以折叠状态加载，以便用户必须单击右侧的“三个条形图”来加载页面。无论我做什么，我都无法使导航栏正确加载。如果我将其加载在小屏幕上折叠，则在大屏幕上将变得不可见。我已经为此工作了2天。我知道这很简单，但是我无法弄清楚。可以请其他人帮忙。

以下是相关代码……

<body id="page-top" data-spy="scroll" data-target="#nav-target">

  <header id="header">

    <!-- Navigation
      ================================================== -->
   <nav class="navbar navbar-inverse navbar-fixed-top">
      <ul class="nav navbar-nav">
        <li><a href="#page-top" style="font-size:1.5em;">Watch It Outside</a></li>
        <li id="drop"><a href="#" class="fa fa-align-justify visible-xs" style="position:absolute;right:40px; top:-40px;"></a></li>
        <li id="drop1"><a href="#home">Home</a></li>
        <li id="drop2"><a href="http://www.boston.gov/news" target="_blank">City Of Boston News</a></li>
        <li id="drop3"><a href="http://www.boston.gov/parks/public-garden" target="_blank">Boston Public Gardens</a></li>
        <li id="drop4"><a href="#films" class="collapse-sm collapse-xs collapse-md">Film Information</a></li>
        <li id="drop5"><a href="#register">Registration</a></li>
      </ul>
    </nav>


  </header>

  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!-- Javascript and Bootstrap -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  <script>
    // Scrollspy fluide
    $(function () {
      $('li>a').on('click', function (e) {
        var hash = this.hash;
        $('html, body').animate({
          scrollTop: $(this.hash).offset().top
        }, 1000, function () {
          window.location.hash = hash;
        });
      });
    });
  </script>



  <script>
    $(function() {
      $('#drop').click(function() {
        $('#drop1').collapse('toggle');
        $('#drop2').collapse('toggle');
        $('#drop3').collapse('toggle');
        $('#drop4').collapse('toggle');
        $('#drop5').collapse('toggle');
      });

      $('#drop1').click(function() {
        $('#drop1').collapse('toggle');
        $('#drop2').collapse('toggle');
        $('#drop3').collapse('toggle');
        $('#drop4').collapse('toggle');
        $('#drop5').collapse('toggle');
      });
      $('#drop4').click(function() {
        $('#drop1').collapse('toggle');
        $('#drop2').collapse('toggle');
        $('#drop3').collapse('toggle');
        $('#drop4').collapse('toggle');
        $('#drop5').collapse('toggle');
      });
      $('#drop5').click(function() {
        $('#drop1').collapse('toggle');
        $('#drop2').collapse('toggle');
        $('#drop3').collapse('toggle');
        $('#drop4').collapse('toggle');
        $('#drop5').collapse('toggle');
      });
});
</script>

我还遇到了一个奇怪的错误，该错误最近在该站点中弹出，现在我必须单击两次链接才能使其第一次关闭。从那里开始，每次单击切换都会使其折叠并展开，但是第一个单击需要2次单击才能折叠导航栏。（我不知道该如何更改以导致这种情况，因为它并非以这种方式开始的）

Answer 1

尝试类似 if (device.width < 800) { $("nav").addClass("collapsed"); }

在小屏幕上垂直放置时，如何在折叠状态下加载NavBar

1 个答案: