我正在尝试实现侧边导航栏，它可以调整大小并且在栏上有一个按钮，即点击按钮时侧边导航应该打开，再次点击按钮它应该关闭。 我无法在栏上实现按钮部分。 你能帮帮我吗..
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Navigation</title>
<script>document.write('<base href="' + document.location + '" />');
</script>
<link href="style.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery"></script>
<script data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js" data-require="angular.js@1.2.x"></script>
<script src="app.js"></script>
<script src="resizer.js"></script>
</head>
<body ng-controller="MainCtrl">
<div id="topnav">Top navbar</div>
<div id="sidebar">
<h3>Side Navbar</h3>
</div>
<div id="content">
<div id="top-content">Top content <p>{{content}}</p></div>
<div id="content-resizer"
resizer="horizontal"
resizer-height="6"
resizer-top="#top-content" >
</div>
</div>
<div id="sidebar-resizer"
resizer="vertical"
resizer-width="6"
resizer-left="#sidebar"
resizer-right="#content"
resizer-max="100%">
</div>
</body>
</html>
“app.js”的代码
var app = angular.module('myApp', ['mc.resizer']);
app.controller('MainCtrl', function($scope) {
$scope.content = 'Hello World';
});
“resizer.js”的代码
angular.module('mc.resizer', []).directive('resizer', function($document) {
return function($scope, $element, $attrs) {
$element.on('mousedown', function(event) {
event.preventDefault();
$document.on('mousemove', mousemove);
$document.on('mouseup', mouseup);
});
function mousemove(event) {
if ($attrs.resizer == 'vertical') {
// Handle vertical resizer
var x = event.pageX;
if ($attrs.resizerMax && x > $attrs.resizerMax) {
x = parseInt($attrs.resizerMax);
}
$element.css({
left: x + 'px'
});
$($attrs.resizerLeft).css({
width: x + 'px'
});
$($attrs.resizerRight).css({
left: (x + parseInt($attrs.resizerWidth)) + 'px'
});
} else {
// Handle horizontal resizer
var y = window.innerHeight - event.pageY;
}
}
function mouseup() {
$document.unbind('mousemove', mousemove);
$document.unbind('mouseup', mouseup);
}
};
});
“style.css”的代码
#topnav {
background-color: #333333;
display: block;
height: 35px;
left: 0;
position: absolute;
right: 0;
top: 0;
background-color: #DDD;
}
#sidebar {
background-color: #AEE;
position: absolute;
top: 35px;
bottom: 0;
left: 0;
width: 200px;
overflow: auto;
}
#content {
position: absolute;
top: 35px;
bottom: 0;
left: 205px /* 200 + 6*/;
right: 0;
overflow: hidden;
color: #FFF;
}
#top-content {
position: absolute;
top: 0;
bottom: 0px; /* 130 + 6 */
left: 0;
right: 0;
background-color: #444;
overflow: auto;
}
#sidebar-resizer {
background-color: #666;
position: absolute;
top: 35px;
bottom: 0;
left: 200px;
width: 5px;
cursor: e-resize;
}
#content-resizer {
position: absolute;
height: 6px;
bottom: 0px;
left: 0;
right: 0;
background-color: #666;
cursor: n-resize;
}
#sidebar-resizer:hover, #preview-resizer:hover {
background-color: #AAA;
}
最佳答案
尝试这个希望它有助于 ng-init 用于初始化侧边栏的状态
<button type="button" ng-click="toggleSideBar=!toggleSideBar">Click Me!</button>
<div id="sidebar" ng-show="toggleSideBar" ng-init="toggleSideBar=true">
<h3>Side Navbar</h3>
</div>
关于javascript - 如何获得可调整大小和可折叠的侧边栏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48579049/