我试图使offcanves侧边栏，一切按预期工作，除了转换，我有一个主包装和两个子包装内容和侧边栏（我从数据库中获取侧边栏列表）。我没有在侧边栏上转换CSS，我不知道会发生什么，如果你能提供任何解决方案，那将非常有帮助，我已经添加了我的代码（我使用JavaScript toggleClass切换侧边栏）
HTML
<div class="main-wrapper d-flex" id="main-wrapper">
<main class="d-flex" id="main-content">
<button type="button" id="slideButton" class="align-self-center order-2">
<i class="fa fa-arrow-left fa-lg" id="slideArrow"></i>
</button>
<div class="book-wrapper d-flex flex-row flex-wrap">
<div class="books">
<div class="section-box">
<figure>
<h3>اسم الكتاب</h3>
<p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p>
<a href="#" class="btn btn-read">Read here</a>
</figure>
<img src="assets/books/1.png">
</div>
</div>
<div class="books">
<div class="section-box">
<figure>
<h3>اسم الكتاب</h3>
<p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p>
<a href="#" class="btn btn-read">Read here</a>
</figure>
<img src="assets/books/2.png">
</div>
</div>
<div class="books">
<div class="section-box">
<figure>
<h3>اسم الكتاب</h3>
<p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p>
<a href="#" class="btn btn-read">Read here</a>
</figure>
<img src="assets/books/3.png">
</div>
</div>
<div class="books">
<div class="section-box">
<figure>
<h3>اسم الكتاب</h3>
<p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p>
<a href="#" class="btn btn-read">Read here</a>
</figure>
<img src="assets/books/4.png">
</div>
</div>
<div class="books">
<div class="section-box">
<figure>
<h3>اسم الكتاب</h3>
<p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p>
<a href="#" class="btn btn-read">Read here</a>
</figure>
<img src="assets/books/4.png">
</div>
</div>
<div class="books">
<div class="section-box">
<figure>
<h3>اسم الكتاب</h3>
<p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p>
<a href="#" class="btn btn-read">Read here</a>
</figure>
<img src="assets/books/1.png">
</div>
</div>
<div class="books">
<div class="section-box">
<figure>
<h3>اسم الكتاب</h3>
<p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p>
<a href="#" class="btn btn-read">Read here</a>
</figure>
<img src="assets/books/2.png">
</div>
</div>
<div class="books">
<div class="section-box">
<figure>
<h3>اسم الكتاب</h3>
<p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p>
<a href="#" class="btn btn-read">Read here</a>
</figure>
<img src="assets/books/3.png">
</div>
</div>
<div class="books">
<div class="section-box">
<figure>
<h3>اسم الكتاب</h3>
<p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p>
<a href="#" class="btn btn-read">Read here</a>
</figure>
<img src="assets/books/4.png">
</div>
</div>
<div class="books">
<div class="section-box">
<figure>
<h3>اسم الكتاب</h3>
<p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p>
<a href="#" class="btn btn-read">Read here</a>
</figure>
<img src="assets/books/4.png">
</div>
</div>
<div class="books">
<div class="section-box">
<figure>
<h3>اسم الكتاب</h3>
<p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p>
<a href="#" class="btn btn-read">Read here</a>
</figure>
<img src="assets/books/1.png">
</div>
</div>
<div class="books">
<div class="section-box">
<figure>
<h3>اسم الكتاب</h3>
<p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p>
<a href="#" class="btn btn-read">Read here</a>
</figure>
<img src="assets/books/2.png">
</div>
</div>
<div class="books">
<div class="section-box">
<figure>
<h3>اسم الكتاب</h3>
<p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p>
<a href="#" class="btn btn-read">Read here</a>
</figure>
<img src="assets/books/3.png">
</div>
</div>
<div class="books">
<div class="section-box">
<figure>
<h3>اسم الكتاب</h3>
<p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p>
<a href="#" class="btn btn-read">Read here</a>
</figure>
<img src="assets/books/4.png">
</div>
</div>
<div class="books">
<div class="section-box">
<figure>
<h3>اسم الكتاب</h3>
<p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p>
<a href="#" class="btn btn-read">Read here</a>
</figure>
<img src="assets/books/4.png">
</div>
</div>
<div class="books">
<div class="section-box">
<figure>
<h3>اسم الكتاب</h3>
<p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p>
<a href="#" class="btn btn-read">Read here</a>
</figure>
<img src="assets/books/3.png">
</div>
</div>
<div class="books">
<div class="section-box">
<figure>
<h3>اسم الكتاب</h3>
<p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p>
<a href="#" class="btn btn-read">Read here</a>
</figure>
<img src="assets/books/1.png">
</div>
</div>
<div class="books">
<div class="section-box">
<figure>
<h3>اسم الكتاب</h3>
<p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p>
<a href="#" class="btn btn-read">Read here</a>
</figure>
<img src="assets/books/2.png">
</div>
</div>
<div class="books">
<div class="section-box">
<figure>
<h3>اسم الكتاب</h3>
<p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p>
<a href="#" class="btn btn-read">Read here</a>
</figure>
<img src="assets/books/3.png">
</div>
</div>
</div>
</main>
<div class="p-0" id="sidebar">
<form action="" class="search">
<div class="input-group">
<i class="input-group-addon fa fa-search"></i>
<input class="form-control" type="search" placeholder="بحث الكتب" aria-label="Search">
</div>
</form>
<div id="tree"></div>
</div>
</div>
<script>
$("#slideButton").click(function (e) {
$("#sidebar").toggleClass("collapse");
});
</script>
CSS
#main-wrapper {
height: 100vh;
}
#main-content {
.book-wrapper {
justify-content: space-between;
overflow: auto;
height: inherit;
padding-bottom: 100px;
-ms-overflow-style: none;
&::after {
content: "";
flex: auto;
}
.books{
padding: 10px;
}
.section-box {
height: 230px;
width: 160px;
background: radial-gradient(#6e6e6e, #2f2f2f);
background: -webkit-radial-gradient(#6e6e6e, #2f2f2f);
background: -moz-radial-gradient(#6e6e6e, #2f2f2f);
color: #fff;
position: relative;
overflow: hidden;
margin: 10px 0;
}
.section-box figure {
position: absolute;
text-align: right;
padding: 10px 19px 19px 19px;
width: 100%;
height: 100%;
border-top: 1px solid #fff;
background: rgba(0, 0, 0, 0.71);
bottom: -80%;
transition: ease-in-out .5s;
margin-bottom: 0;
}
.section-box:hover figure {
bottom: 0;
}
.section-box figure h3 {
margin: 0;
padding-bottom: 10px;
}
.section-box img {
height: 100%;
width: auto;
}
.btn-read {
width: 100%;
background: transparent;
border-radius: 0;
border: 1px solid #ffffff;
color: #fff;
}
}
button i {
font-size: 24px;
background-color: #e6e4e4;
}
}
#sidebar {
min-width: 350px;
max-width: 350px;
overflow-y: auto;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
@include red-gradient(right,
left);
.collapse{
margin-right: -350px;
}
.search {
padding: 15px 10px 0 10px;
margin-left: 10%;
width: 80%;
}
.search i {
line-height: 1.5;
background: #fff;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.search input {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
text-align: right;
border-left: none;
&:focus {
border-color: none;
box-shadow: none;
}
}
}
答案 0 :(得分：0)
如果你正在编写SASS，那么你是如何编写被切换的类collapse的样式的，它没有应用到你的侧边栏。您需要将CSS编写为#sidebar.collapse而不是嵌套#sidebar .collapse：
[使用SASS父选择器：https://css-tricks.com/the-sass-ampersand/]
#sidebar {
&.collapse {
margin-right: -350px;
}
}