Fatal编程技术网
  • javascript/
  • Javascript 如何在触摸菜单以外的任何位置时折叠（关闭）iPhone、iPad、智能手机、平板电脑等设备上的引导扩展菜单？

Javascript 如何在触摸菜单以外的任何位置时折叠（关闭）iPhone、iPad、智能手机、平板电脑等设备上的引导扩展菜单？

javascript jquery css responsive-design

Javascript 如何在触摸菜单以外的任何位置时折叠（关闭）iPhone、iPad、智能手机、平板电脑等设备上的引导扩展菜单？,javascript,jquery,css,responsive-design,twitter-bootstrap-2,Javascript,Jquery,Css,Responsive Design,Twitter Bootstrap 2,我正在使用Bootstrap framework v2.0.1开发一个网站 当我的网站在iPhone、iPad、其他平板电脑、智能手机等设备上浏览时，出现在PC或笔记本电脑浏览器中的水平菜单会折叠成一个图标。此图标位于设备屏幕的右上角 当用户触摸此图标时，菜单将展开。如果用户触摸此扩展菜单中的任何菜单项，菜单将折叠（关闭），与该菜单链接的相应页面将打开 到现在为止，一切都很顺利。但是当用户触摸屏幕表面上显示在扩展（打开）菜单下面的任何地方时，我想折叠（关闭）扩展（打开）菜单 我试图做到这一点，但

我正在使用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>


页面标题

    

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 


一些HTML代码
---------------------------------------------------
---------------------------------------------------
---------------------------------------------------
一些HTML代码
---------------------------------------------------
---------------------------------------------------
---------------------------------------------------
一些HTML代码
---------------------------------------------------
---------------------------------------------------
---------------------------------------------------
一些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');
    };
  });
});

$（文档）.ready（函数（）{
$（“div.container”）。单击（函数（e）{//当用户触摸到类为“container”的任何div时，我们检测到正在单击的元素。
如果（$（！e.target）.hasClass（“.nav collapse”）{//如果元素不是我们的菜单，我们使用内置引导方法向后折叠（关闭）这个扩展（打开）菜单，即-------
$（'.nav collapse'）。collapse（'hide'）；
};
});
});
简言之，当用户触摸屏幕上任何部分的任何位置时，我希望折叠回（关闭）展开的（打开的）菜单。此外，在选择任何菜单项时折叠（关闭）菜单的原始功能应保持原样。它不应该以任何方式受到影响

我应该如何做到这一点

提前感谢。

如果我理解正确，您的要求是在单击菜单栏外的任何一个
div.container
s时关闭打开的菜单。您可以这样做：

 $("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
         }
     }
 });

v2.0.1已经过时了，你真的应该更新一下。。。