用于滑动菜单的 jQuery toggle()答案

【问题标题】：jQuery toggle() for sliding menu用于滑动菜单的 jQuery toggle()
【发布时间】：2017-06-16 01:57:52
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： javascript jquery css

【解决方案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>

【讨论】：

【解决方案2】：

似乎有一个线程与您的情况非常相似。看看这个！

Toggle Between two Divs

【讨论】：

通常不建议在链接产生最多（如果不是全部）答案内容的地方发布答案。解释该链接中的一些信息以适应此 OP 的问题，或将问题标记为链接问题的重复。