jquery - Bootstrap 侧边栏仅切换顶部

Question

我有一个问题，如果它是 jQuery、CSS 或 HTML，我并没有真正定位。但我遇到的问题是侧边栏仅切换汉堡包图标的顶部。这不是 boostrap 切换器，这是一个仅出现在 LG 屏幕及以上屏幕上的附加侧边栏。在这篇文章的底部，我附上了一个问题清晰可见的 CodePen。

我尝试了什么？

将列表组高度设置为 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'});
    })
})

这是 CodePen 问题所在 https://codepen.io/anon/pen/LrZxPr

Answer 1

解决了!我更改了 CSS，问题是通过在整个 fiddle 中使用 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;
}