Jansy Bootstrap Off-Canvas 菜单未在单击时关闭

Posted 2023-05-09

【中文标题】Jansy Bootstrap Off-Canvas 菜单未在单击时关闭

【英文标题】：Jansy Bootstrap Off-Canvas Menu Not Closing on Single Click

【发布时间】：2016-11-16 10:24:30

【问题描述】：

我在使用 UI-Router 的 Angular 应用程序中使用 Jansy Bootstrap 非画布菜单。此外，我更改了一些样式以扩展小型和大型设备的菜单响应样式。在桌面上，菜单应该在没有切换按钮的左侧，并且随着浏览器变小而动画消失。我已经成功地做到了这一点，只是在较小的设备上无法关闭菜单并让主体滑回左侧。它仅在我单击两次而不是仅单击一次时才有效。

body 
  margin: 60px 0px 0px 250px;

.navmenu-fixed-left 
  display: block;
  position: absolute;
  left: 0px;
  width: 250px;
  background: #202020;
  transition: left .5s;

.navmenu > ul 
  list-style-type: none;
  padding-top: 20px;

.navmenu > ul > li 
  padding: 10px 0px;
  margin-left: -40px;

.navmenu > ul > li > a 
  color: #eee;
  padding-left: 40px;

.navmenu > ul > li > a:hover 
  text-decoration: none;

.navmenu > ul > li:hover,
.active 
  background: #000;

.navmenu > ul > li > a > i 
  padding-right: 10px;

.navbar 
  left: 250px;
  transition: left .3s;

.navbar-toggle 
  display: none;

.navbar 
  height: 30px;
  background: #fff;

@media only screen and (max-width: 768px) 
  html,
  body 
    margin: 30px 0px 0px 0px;
    height: 100% !important;
  
  .navmenu-fixed-left 
    left: -250px;
    margin-top: -60px;
  
  .navbar 
    left: 0px;
  
  .navbar-toggle 
    display: block;
    float: left;
    padding: 9px 10px;
    margin-top: -8px;
    border: 0px;
    border-radius: 0px;
    cursor: pointer;
  

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css" rel="stylesheet" />

<nav id="myNavmenu" class="navmenu navmenu-inverse navmenu-fixed-left offcanvas" role="navigation">
  <ul>
    <li ui-sref-active="active"><a ui-sref="overview">Home</a>
    </li>
    <li ui-sref-active="active"><a ui-sref="transactions"><i class="fa fa-history" aria-hidden="true"></i> Chickens</a>
    </li>
    <li ui-sref-active="active"><a ui-sref="teams"><i class="fa fa-users" aria-hidden="true"></i>Cows</a>
    </li>
    <li ui-sref-active="active"><a ui-sref="members"><i class="fa fa-user" aria-hidden="true"></i>Pigs</a>
    </li>
    <li ui-sref-active="active"><a ui-sref="cards"><i class="fa fa-credit-card-alt" aria-hidden="true"></i> Sheep</a>
    </li>
    <li ui-sref-active="active"><a ui-sref="trends"><i class="fa fa-bar-chart" aria-hidden="true"></i>Dogs</a>
    </li>
  </ul>
</nav>
<div class="navbar navbar-default navbar-fixed-top">
  <p class="navbar-brand dynamictitle"><i class="fa fa-bars navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body" aria-hidden="true"></i> $title</p>

</div>
<!--Main Content included from different view -->
<!--Navbar include-->
<div ui-view="navBar"></div>

<div class="container-fluid">
  <p>Main Content Here.....</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>

【问题讨论】：

似乎按预期工作：请发布任何重现问题的其他代码（或信息）。

【参考方案1】：

我已经解决了我自己的问题。这是我的做法： 我在页面中添加了一个控制器以删除添加到正文中的内联样式，然后通过从正文或 html 中删除任何样式来更改 css。

angular.module('myApp').controller('navCtrl', function () 
$('body').removeAttr("style");
);

/*html, bodymargin:60px 0px 0px 250px;*/
.main margin:60px 0px 0px 250px;

@media only screen and (max-width : 768px) 
/*html, bodymargin:30px 0px 0px 0px; height: 100% !important;*/
.mainmargin:60px 0px 0px 0px;