javascript - 用于滑动菜单的 jQuery toggle()

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; 添加到菜单中，以便菜单显示在侧边栏上方。

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

    .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;
    }

<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>