Question

我尝试制作一个响应式导航栏，当用户点击它时，该导航栏会关闭。在我的计算机上，一切都按照它应该的方式运行：当我调整窗口大小时，导航栏折叠并切换图标显示，我可以通过单击图标打开和关闭导航栏，并且由于Javascript，我也可以通过单击菜单外部（根据需要）关闭它。但是当我在移动设备上运行相同的代码时，虽然导航栏使用切换图标打开和关闭，但在其外部点击时它不会崩溃。所以JS似乎没有在这里工作:(我在其他地方找到的任何JS和Jquery也会让我的下拉菜单变得混乱。任何人都有任何想法，我可以做什么让JS在移动设备上工作？这是codepen上的代码 - 如果您将其加载到移动设备上，您将会看到我的意思（否则代码在计算机上似乎正常工作！）

HTML：

 <nav class="navbar navbar-default navbar-fixed-top">
     <div class="container">
        <div class="navbar-header">
           <button type="button" class="pull-left navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
              <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="#" class="navbar-brand">Business</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-nav-demo">
           <ul class="nav navbar-nav">
              <li class="dropdown">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fas fa-suitcase"></i> About <span class="caret"></span></a>
                 <ul class="dropdown-menu">
                    <li class = "diff"><a href="#"> <i class="far fa-clock"></i> Store Hours</a></li>
                    <li role="separator" class="divider"></li>
                    <li class = "diff"><a href="#"><i class="fas fa-map-marker-alt"></i> Location & Directions</a></li>
                    <li role="separator" class="divider"></li>
                    <li class = "diff"><a href="#"><i class="fas fa-car"></i> Parking</a></li>            
                 </ul>
              </li>
              <li><a href="#"><i class="fas fa-edit"></i> Reviews</a></li>
           </ul>
        </div>
     </div>
  </nav>

JS：

 $(document).click(function (event) {
        var clickover = $(event.target);
        var $navbar = $(".navbar-collapse");               
        var _opened = $navbar.hasClass("in");
        if (_opened === true && !clickover.hasClass("navbar-toggle")) {      
            $navbar.collapse('hide');
        }
        });

我的CSS已包含在codepen中。如果可以，请帮助，谢谢：D

Boostrap 3：Navbar在其移动时单击其外部时不会崩溃

0 个答案: