我有一个问题，我并没有真正瞄准它是jQuery，CSS还是HTML。但是我遇到了一个问题，侧边栏只切换汉堡包图标的顶部。这不是 boostrap 切换器，这是一个额外的侧边栏，只出现在 lg 屏幕上及以上。在这篇文章的底部，我附上了一个代码笔，问题清晰可见。
我试过什么？
将列表组高度设置为 100%，其中我要切换的所有项目都不起作用。更改jQuery也没有帮助，但我相信这就是我想要的动画功能，它只是没有完全切换
<div class="col-12 mr-4 sidebar">
<div class="mini-submenu">
<span class="icon-bar2"></span>
<span class="icon-bar2"></span>
<span class="icon-bar2"></span>
</div>
<div class="list-group mt-5">
<span href="#" class="list-group-item active">
<img style="width:150px;" class="svgcenter mt-4" src="assets/svgs/logolight.svg">
<span class="pull-right" id="slide-submenu">
<i class="fa fa-times"></i>
</span>
</span>
<p class="white py-4 px-5 text-center list-group-item light">
Lorem ipsum diocritatem eu, fierent molestie petentium id his. Ut aeterno nostrum nam, solet sapientem ea quo. Cum te meis illud, aeterno accusata ut vix.
</p>
<div href="#" class="list-group-item py-4">
<li><h5 class="white text-center"><i class="white fas fa-map-marker-alt mr-2"></i>Mave Avenue, New York</h5></li>
<li><h5 class="white text-center"><i class="white fas fa-phone-square mr-2"></i>United States (+1) 3333.1111</h5></li>
<li><h5 class="white text-center"><i class="white fas fa-envelope mr-2"></i>hello@ourcompany.com</h5></li>
</div>
<div class="list-group-item text-center pt-4 ">
<h6>Follow Us</h6>
<div class="text-center py-3">
<li class="list-inline-item"><a href="http://www.facebook.com"><i class="fab fa-facebook-f"></i></a></li>
<li class="list-inline-item"><a href="http://www.twitter.com"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="http://www.instagram.com"><i class="fab fa-instagram"></i></a></li>
</div>
<div class="list-group-item py-4">
<a href="#" class="d-block white py-2">
<i class="fa fa-users"></i> About Us
</a>
<a class="white d-block" href="#">
<i class="fa fa-envelope"></i> Contact Us
</a>
</div>
</div>
这是 CSS
.sidebartop {
z-index: 50;
}
.mini-submenu {
display: inline-block;
background-color: rgba(0, 0, 0, 0);
padding: 7px;
}
.mini-submenu:hover {
cursor: pointer;
}
.mini-submenu .icon-bar2 {
border-radius: 1px;
display: block;
height: 2px;
width: 20px;
margin-top: 3px;
text-align: right;
}
.mini-submenu .icon-bar2:nth-child(2) {
width: 16px;
transform: translatex(4px);
}
.mini-submenu .icon-bar2 {
background-color: #000;
}
#slide-submenu {
background: rgba(0, 0, 0, 0.45);
display: inline-block;
padding: 0 8px;
border-radius: 4px;
cursor: pointer;
z-index: 40;
}
.list-group {
display: none;
width: 350px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background: #303030;
opacity: 0.95;
border-color: transparent;
border: none;
}
.list-group-item.active {
z-index: 2;
color: #fff;
background-color: #303030;
border-color: transparent;
opacity: 0.95;
}
.list-group-item {
background: #303030;
opacity: 0.95;
border-color: transparent;
color: #fff;
}
nav h5 i {
font-size: 18px;
opacity: 0.8;
}
.sidebar a:hover {
color: #fff;
}
.sidebar a {
line-height: 1.5;
font-weight: 600;
font-size: 13.5px;
color: #fff;
}
和 jQuery。对不起，代码很长
$(function(){
//effect to close submenu
$('#slide-submenu').on('click',function() {
$(this).closest('.list-group').animate({'width':'toggle',}),function(){
$('.list-group').animate({'width':'toggle'});
};
});
//effect to open submenu
$('.mini-submenu').on('click',function(){
$(this).next('.list-group').animate({'width':'toggle'});
})
})
这是问题可见的代码笔 https://codepen.io/anon/pen/LrZxPr
解决了！我更改了 CSS，问题是通过在整个小提琴中使用 position：absolute 来，我从 DOM 流中删除了子元素，并干扰了父元素增量隐藏其子元素的能力，通过将位置更改为固定来固定。
.list-group {
display: none;
width: 350px;
height: 100%;
position: fixed;
top: 0;
right: 0;
background: #303030;
opacity: 0.95;
border-color: transparent;
border: none;
}