响应式菜单 jquery

Posted 2023-05-08

【中文标题】响应式菜单 jquery

【英文标题】：Responsive Menu jquery

【发布时间】：2019-02-02 02:35:00

【问题描述】：

我对这个 jquery 代码有疑问。我想当我点击“openmenu”“closemenu”移动left: 50%而不是left: 85%

$("#openMenu").click(function()
    $("#closeMenu").animate(left:"50%"); 

而不是

$("#closeMenu").animate(left:"85%");

---

代码：

$(document).ready(function()
  $("#openMenu").click(function()
    $("#main") .fadeIn(200);
    $("#openMenu").animate(left:"-100%");
    $("#closeMenu").animate(left:"85%");
    $(".menu").animate(left:"-1%",10);
  );

  $("#closeMenu").click(function()
    $("#main") .fadeOut(200);
    $("#openMenu").animate(left:"3%");
    $("#closeMenu").animate(left:"100%");
    $(".menu").animate(left:"-50%",10);
  );
);

#menuSection
  height: 100%;
  width: 50%;
  background-color: #e78d3a;
  position: absolute;
  left: 50%;
  background-image: url("../images/background_secondary-home.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  
#menuSection ul
  list-style: none;
  margin: 0px;
  padding:0px;
  position: absolute;
  top: 30%;
  left: -1%;



#menuSection ul li
  height: 100px;
  width: 350px;
  font-family:'Poppins', sans-serif;
  font-size: 60px;
  line-height: 100px;
  cursor: pointer;
  font-weight: 600;



.menu
  height: 100px;
  width: 0px;
  background-color: #ff931e;
  display: flex;
  position: absolute;
  left: -50%;
  cursor: pointer;
  pointer-events: none;
  transition: all .5s;


#menuSection ul li:hover .menu
  width: 350px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Pulse Menu -->
<div  class="pulse" id="openMenu">
    <img class="img-responsive icon-menu_open" src="images/icon-menu_open.svg">
</div>
<!--/Pulse Menu -->

<!-- Menu -->
<div id="closeMenu">
    <i class="fa fa-times icon-menu" style="font-size: 25px;color:rgb(238, 238, 238);position: absolute;top: 30%;left: 100%;"></i>
</div>

我是初学者，想知道jquery是否有责任

【问题讨论】：

您面临的问题是什么？请告诉更多关于它的信息，如果可能的话，edit你的问题/sn-p 添加一个我们可以实际重现问题的 html。谢谢！

在响应式 vorrie 中，当我打开菜单时，关闭菜单是 50% 而不是 85%

【参考方案1】：

在您的 jQuery 代码中有第 5 行：

$("#closeMenu").animate(left:"85%");

尝试将其更改为：

$("#closeMenu").animate(left:"50%");