滑动菜单

Question

我正在尝试使用jQuery实现切换选项。我有两种风格（子菜单图标和子菜单移动）。点击“子菜单 - 图标”类div，我想切换“子菜单 - 移动”类div从左到右，从右到左切换。

$(document).ready(function() {
  $('.sub-menu-icon').toggle(function() {
    $(".sub-menu-mobile").css("width", "200px");
  });
});

.sub-menu-icon {
  width: 30px;
  height: 30px;
  border: 1px solid #2B383E;
  background-color: #4390ce;
  display: block;
  float: right;
}
.sub-menu-mobile {
  min-width: 0px;
  height: 100%;
  background-color: #cccccc;
  position: absolute;
  top: 0px;
  right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-menu-icon">
  Icon
</div>
<div class="sub-menu-mobile">
  Rights side Menu
</div>

Answer 1

您想在菜单上使用单击处理程序，然后切换切换宽度的类。您还需要重新排列HTML元素并将position: relative;添加到菜单中，以便菜单显示在侧边栏上方。

＆＃13;

＆＃13;

$('.sub-menu-icon').on('click',function() {
  $(".sub-menu-mobile").toggleClass('width');
});

＆＃13;

    .sub-menu-icon {
      width: 30px;
      height: 30px;
      border: 1px solid #2B383E;
      background-color: #4390ce;
      display: block;
      float: right;
      position: relative;
    }
    
    .sub-menu-mobile {
      min-width: 0px;
      height: 100%;
      background-color: #cccccc;
      position: absolute;
      top: 0px;
      right: 0px;
    }
    
    .width {
      width: 200px;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-menu-mobile">
  Rights side Menu
</div>
<div class="sub-menu-icon">
  icon
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

似乎有一个案例的线程与你的案件非常相似。看看这个！

Toggle Between two Divs