首页 文章

用于滑动菜单的jQuery toggle（）

提问于
浏览 次
0

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

2 回答

  • 0

    您想在菜单上使用单击处理程序，然后切换一个切换宽度的类 . 您还需要重新排列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

    回复于

相关问题