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

【问题标题】：Jansy Bootstrap Off-Canvas Menu Not Closing on Single ClickJansy Bootstrap Off-Canvas 菜单未在单击时关闭
【发布时间】：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>

【问题讨论】：

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

标签： jquery css angularjs twitter-bootstrap angular-ui-router

【解决方案1】：

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

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

/*html, body{margin:60px 0px 0px 250px;}*/
.main {margin:60px 0px 0px 250px;}

@media only screen and (max-width : 768px) {
/*html, body{margin:30px 0px 0px 0px; height: 100% !important;}*/
.main{margin:60px 0px 0px 0px;}

【讨论】：