【发布时间】：2018-07-12 17:45:58
【问题描述】：
我正在尝试实现侧导航栏，它可以调整大小并且在栏上有一个按钮，即单击按钮时侧导航应该打开，然后再次单击应该关闭的按钮。 我无法在栏上实现按钮部分。 你能帮帮我吗..
<!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;
}
【问题讨论】：
-
请贴出一些你尝试过的JS代码。这只是一个 HTML 页面，不足以让你得到一些帮助！
-
@sjahan 我已经更新了这个问题。请看一看。感谢您帮助我。
-
@sjahan 这是一个侧导航栏
-
首先，我设置了一个小提琴：jsfiddle.net/4dxjfxd9 第二点：你确定你的 angularJS 应用程序正在运行吗？在小提琴中，起初什么也没发生（
content范围变量未设置，我没有看到 Hello World）。我添加了ng-app以便它启动，您确定您的应用程序正在启动吗？
标签： javascript jquery html css angularjs