滑动列，而不是移动整个元素JQUERY
滑动列，而不是移动整个元素JQUERY
提问于 2019-10-16 13:27:39
我似乎想不出怎么才能让左边的列作为一个覆盖层从上面过去.别动整张桌子。我已经看到了它覆盖整个页面的例子，但是我只需要它在嵌套部分中覆盖，而不是整个页面。
当左边的列滑过内部元素的顶部时，我不太确定它是什么，但是我已经看到了它在整个页面上滑动的例子，我只需要它在div的顶部滑动。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$(".toggle-sidebar").click(function () {
$("#sidebar").toggleClass("collapsed");
$("#content").toggleClass("col-md-12 col-md-9");
return false;
});
});
</script>
<style>
html,
body {
height: 100%;
}
.jumbotron {
margin-top: 30px;
}
#content,
#sidebar {
min-height: 500px;
}
#row-main {
overflow-x: hidden; /* necessary to hide collapsed sidebar */
}
#content {
background-color: lightyellow;
-webkit-transition: width 0.3s ease;
-moz-transition: width 0.3s ease;
-o-transition: width 0.3s ease;
transition: width 0.3s ease;
}
#content .btn-group {
margin-bottom: 10px;
}
.col-md-9 .width-12,
.col-md-12 .width-9 {
display: none; /* just hiding labels for demo purposes */
}
#sidebar {
background-color: lightgrey;
-webkit-transition: margin 0.3s ease;
-moz-transition: margin 0.3s ease;
-o-transition: margin 0.3s ease;
transition: margin 0.3s ease;
}
.collapsed {
display: none; /* hide it for small displays */
}
@media (min-width: 992px) {
.collapsed {
display: block;
margin-left: -25%; /* same width as sidebar */
}
}
#sortable { list-style-type: none; margin: 0; padding: 0; width: 50%; }
#sortable li { margin: 0 3px 3px 3px; font-size: 1.4em; height: 15px; }
#sortable li span { position: absolute; margin-left: -1.25em; }
</style>
</head>
<body>
<div class="container">
<div class="row" id="row-main">
<div class="col-md-3" id="sidebar">
side area
</div>
<div class="col-md-9" id="content">
<div class="btn-group" role="group" aria-label="Controls">
<button type="button" class="btn btn-default toggle-sidebar">Toggle sidebar</button>
</div>
<pre>Inner</pre>
</div>
</div>
</div>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-10-16 13:52:09
如果你想让侧边栏在其他内容之上，你必须制作它的position: absolute。
你也应该把它从桌子上拿出来。
这就是你需要的：
#sidebar {
background-color: lightgrey;
width: 200px;
position: absolute;
left: 0;
top: 0;
z-index: 1;
transition: transform 500ms ease-in-out;
}
.collapsed {
transform: translateX(-100%)
}我还修改了html的一些内容，以便将侧栏从row元素中删除。
____更新-关闭按钮添加了_____
若要添加关闭按钮，请在侧栏容器中添加以下html：
<button id="closeSidebar">x</button>css如下：
#closeSidebar {
position: absolute;
top: 0;
right: 0;
padding: 3px 10px;
cursor: pointer;
}最后，Javascript如下：
$("#closeSidebar").click(function() {
$("#sidebar").toggleClass("collapsed");
return false;
});看看这是不是你想要的：https://jsfiddle.net/wnpv2got/2/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58414522
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号