Jansy Bootstrap Off-Canvas-Menü schließt nicht bei einem einzigen Klick

Question

Ich verwende das Jansy Bootstrap Off-Canvas-Menü in meiner Angular App, die UI-Router verwendet. Außerdem habe ich einige Einstellungen geändert, um den Reaktionsmodus des Menüs für kleine und größere Geräte zu erweitern. Auf dem Desktop sollte das Menü auf der linken Seite ohne den Umschaltknopf sein und weg animieren, wenn der Browser kleiner wird. Ich habe das erfolgreich gemacht, mit der Ausnahme, dass ich das Menü nicht schließen konnte und den Körper auf einem kleineren Gerät nach links rutschen ließ. Es funktioniert nur, wenn ich zweimal klicke, anstatt nur einmal zu klicken.

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>

Answer 1

Ich habe mein eigenes Problem gelöst. Hier ist, wie ich es gemacht habe: Ich habe einen Controller zu meiner Seite hinzugefügt, um den Inline-Stil zu entfernen, der zum Körper hinzugefügt wird, und dann die CSS geändert, indem ich jedes Styling von Body oder HTML entfernt habe.

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;}