Question

我正在使用bootstrap创建网站，我的导航栏没有崩溃。有什么解决方案吗

我的脚本是：

  link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
  <script src="scrolling.js"></script>

还有这个

script type="text/javascript">
     $(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') && ( $(e.target).attr('class') != 'dropdown-toggle' ) ) {
        $(this).collapse('hide');
    }

和我的index.html

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class-"navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="img/_logo.png" style="width:190px;height:75px;"></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#home">Strona główna</a></li>
            <li><a href="#about">O nas</a></li>
            <li><a href="#activ">Aktywność</a></li>
            <li><a href="#offer">Oferta</a></li>
             <li><a href="#contact">Kontakt</a></li>
          </ul> <!-end of navbar--->
        </div> <!-end of container--->
      </div> <!-end of nav->
  </nav>

Answer 1

您遇到了一些问题，请参阅this resource进行说明。你错过了data-target="myNavbar"中的“＃”。此外，class-"navbar-header"需要更改为class="navbar-header"。最后，除非你想手动处理它，否则你不需要你提供的JavaScript，因为bootstrap已经处理了这个事件。

导航栏菜单没有折叠

1 个答案: