可收起展开的侧边导航如何实现?

Question

如下图，侧边导航底部收缩按钮是否可经过配置实现？Menu组件说明中未提到

Answer 1

dom:

<div class="main-content">
  <div class="side-nav">
    
  </div>
  <div class="content">
    <button action="show-side-nav">Toggle Side Nav</button>
  </div>
</div>

样式:

html ,body { padding: 0px;margin: 0px; }

$side-nav-width: 200px;
.main-content {
  position: relative;
  &.side-nav-show {
    .side-nav {
      left: 0px;
    }
    .content {
      margin-left: $side-nav-width;
    }
  }
  .side-nav ,
  .content {
    transition: all .5s ease-in;
  }
  .side-nav {
    position: absolute;
    top: 0px;
    left: ( 0px - $side-nav-width );
    bottom: 0px;
    width: $side-nav-width;
    background: #333;
  }
  .content {
    background: #DDD;
  }
}

JS:

$(function (){
  var $mainContent = $('.main-content');
  $('[action="show-side-nav"]').on('click' ,function (event){
    if($mainContent.hasClass('side-nav-show')){
      $('.main-content').removeClass('side-nav-show');
    } else {
      $('.main-content').addClass('side-nav-show');      
    }
  });
});

Answer 2

路过改下楼上的代码- -

    $(function() {
        var $mainContent = $('.main-content');
        $(document).on('click', '[action="show-side-nav"]', function(event) {//这样才能监听动态添加的button
            $mainContent.toggleClass('side-nav-show');//简化。。
        });
    });