我有一些html代码,我正在尝试获得:
部件包括:
.main wrapper-我需要保持这一点的绝对值,以便里面的元素使用百分比大小。我不想用vh或vw。
.main.-这需要始终是100%的高度和宽度。
.tbar-需要始终在.main 的左侧可见
.side-将切换从左侧滑动,并在打开时按下.bar和.main。
我希望我能正确地解释。
以下是我尝试过但不对的:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<title></title>
<style>
.main-wrapper {
position: absolute;
top: 59px;
right: 0;
bottom: 0;
left: 0px;
border-left: 3px solid blue;
background-color: grey;
}
.main-wrapper .side {
width: 300px;
height: 100%;
background-color: blueviolet;
}
.main-wrapper .tbar {
position: relative;
left: 0px;
height: 100%;
width: 50px;
background-color: green;
}
.main-wrapper .main {
width: 100%;
height: 100%;
background-color: red;
}
</style>
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand">
<span class="toggle-leftbar navbar-brand"><button id="togglebtn">Toggle</button></span>
<a class="sidebar-toggle mr-3" href="#"><i class="fa fa-bars"></i></a>
<div class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li>Test</li>
</ul>
</div>
</nav>
<div class="main-wrapper">
<div class="side">Side Here</div>
<div class=tbar>TBar</div>
<div class="main">Main Here</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$( document ).ready(function() {
$('.side').toggle();
});
</script>
</body>
</html>
我如何才能让这些零件满足我的需要?
您也定义了$('.side').toggle();
,但当您单击切换按钮时,时间工作为$('.side').toggle();
,所以您在内部尝试单击函数时,添加如下代码。。
$( document ).ready(function() {
$( "#togglebtn" ).click(function() {
$('.side').toggle();
});
});
.main-wrapper {
position: absolute;
top: 59px;
right: 0;
bottom: 0;
left: 0px;
border-left: 3px solid blue;
background-color: grey;
}
.main-wrapper .side {
width: 300px;
height: 100%;
background-color: blueviolet;
}
.main-wrapper .tbar {
position: relative;
left: 0px;
height: 100%;
width: 50px;
background-color: green;
}
.main-wrapper .main {
width: 100%;
height: 100%;
background-color: red;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<nav class="navbar navbar-dark bg-dark navbar-expand">
<span class="toggle-leftbar navbar-brand"><button id="togglebtn">Toggle</button></span>
<a class="sidebar-toggle mr-3" href="#"><i class="fa fa-bars"></i></a>
<div class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li>Test</li>
</ul>
</div>
</nav>
<div class="main-wrapper">
<div class="side">Side Here</div>
<div class=tbar>TBar</div>
<div class="main">Main Here</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>