Question

我正在使用 Bootstrap framework v2.0.1 开发网站。

当我的网站在iPhone，iPad，其他平板电脑，智能手机等设备上浏览时，PC或笔记本电脑上的浏览器中显示的水平菜单会折叠为图标。此图标位于设备屏幕的右上角。

当用户触摸此图标时，菜单会扩展。如果用户触摸此展开菜单中的任何菜单项，则菜单将折叠（关闭），并且与该菜单链接的相应页面将打开。

直到现在一切正常。但是当用户触摸显示在展开（打开）菜单下方的屏幕表面上的任何位置时，我想要折叠（关闭）展开（打开）菜单。

我试图实现这一点，但在我的尝试中无法取得成功，所以请求你的帮助。

为了您的参考，我将我尝试的HTML和jQuery代码放在下面：

我拥有的HTML代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Page Title</title>
    <link href="bootstrap.css" rel="stylesheet">
    <link href="example-fixed-layout.css" rel="stylesheet">    
    <link href="bootstrap-responsive.css" rel="stylesheet">
    <link href="bootstrap-modal.css" rel="stylesheet">
  </head>
  <body>
    <div class="navbar navbar-fixed-top navbar-inverse" style="position:fixed">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="band" href="index.php"><img src="logo.png"/></a>
          <div class="nav-collapse"><!-- This is the menu that I want to toggle -->
            <ul class="nav  pull-right navbar-fixed-bottom" style="font-size:11px">
              <li><a href="login.php"><i class="icon-user icon-black"></i>LOGIN</a></li>
              <li><a href="register.php"><i class="icon-pencil icon-black"></i>REGISTER</a></li>             
              <li><a href="request.php"><i class="icon-edit icon-black"></i>MY REQUESTS</a></li>
              <li><a href="status.php"><i class="icon-edit icon-black"></i>STATUS</a></li>
              <li><a href="contact.php"><i class="icon-envelope icon-black"></i>CONTACT</a></li>
              <li><a href="profile.php"><i class="icon-user  icon-black"></i>MY ACCOUNT</a></li>
              <li><a href="location.php"><i class="icon-map-marker icon-black"></i> LOCATE HERE</a></li>
              <li><a href="login.php"><i class="icon-user  icon-black"></i>LOG OUT</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
    <div class="container" style="padding-top: 125px;">
    Some HTML code
    ---------------------------------------------------
    ---------------------------------------------------
    ---------------------------------------------------
    </div>
    <div class="container">
    Some HTML code
    ---------------------------------------------------
    ---------------------------------------------------
    ---------------------------------------------------
    </div>
    <div class="container" style="margin-bottom:70px;">
    Some HTML code
    ---------------------------------------------------
    ---------------------------------------------------
    ---------------------------------------------------
    </div>
    <footer style="background-color:#000" id="footer">
      <div class="container">
      Some HTML code
      ---------------------------------------------------
      ---------------------------------------------------
      ---------------------------------------------------
      </div>
    </footer>
    <script src="jquery.js"></script>
    <script src="bootstrap-tooltip.js"></script>
    <script src="bootstrap-alert.js"></script>
    <script src="bootstrap-button.js"></script>
    <script src="bootstrap-carousel.js"></script>
    <script src="bootstrap-collapse.js"></script>
    <script src="bootstrap-dropdown.js"></script>
    <script src="bootstrap-modal.js"></script>
    <script src="bootstrap-popover.js"></script>
    <script src="bootstrap-scrollspy.js"></script>
    <script src="bootstrap-tab.js"></script>
    <script src="bootstrap-transition.js"></script>
    <script src="bootstrap-typeahead.js"></script> 
    <script src="bootstrap-modalmanager.js"></script>
  </body>
</html>

我尝试过的jQuery代码，但它没有成功：

$(document).ready(function(){
  $("div.container").click(function(e){ // When user touches anywhere on any of the div present with class "container" we detect what element we are clicking.
    if ($(!e.target).hasClass(".nav-collapse")){ //if the element is not our menu, we use the inbuilt bootstrap method to collapse back(close) this expanded(opened) menu i.e. <div class="nav-collapse">-----</div> 
      $('.nav-collapse').collapse('hide');
    };
  });
});

简而言之，当用户触摸任何部分的任何部分时，我想要折叠（关闭）扩展（打开）菜单。此外，在选择任何菜单项时折叠（关闭）菜单的原始功能应保持原样。它不应该以任何方式受到影响。

我该如何实现这个目标？

提前致谢。

Answer 1

如果我理解正确，您的要求是在菜单栏外的任意一个div.container上点击菜单，如果它已打开。你可以这样做：

 $("div.container").click(function(e) { // When any `div.container` is clicked
     if (!$(this).parents().hasClass("navbar")) { // to check if it's not the menu links that are clicked
         if ($('.nav-collapse').hasClass('in')) { //if the navbar is open (we only want to close it when it is open or else it causes a glitch when you first click outside)
             $('.nav-collapse').collapse('hide'); //hide the navbar
         }
     }
 });

<强> Demo here

如何在触摸菜单以外的任何地方时崩溃（关闭）iPhone，iPad，智能手机，平板电脑等设备上的Bootstrap扩展菜单？

1 个答案: