网站的JS菜单动画不起作用

JS menu animation for website doesn't work

本文关键字：动画 不起作用 菜单 JS 网站      更新时间：2023-09-26

我在我的网站上添加了以下JS，以添加一个从左侧滑出的侧边菜单，它不起作用。我对JS相当缺乏经验，所以任何建议都是有帮助的。

/*global $, jQuery, alert*/
var main = function () {
    "use strict";
    $('.icon-menu').click(function () {
        $('.menu').animate({
            marginLeft: "150px"
        }, 200);
        $('body').animate({
            marginLeft: "150px"
        }, 200);
    });
    $('.icon-close').click(function () {
        $('.menu').animate({
            marginLeft: "-150px"
        }, 200);
        $('body').animate({
            marginLeft: "0px"
        }, 200);
    });
};

$(document).ready(main);

icon-menu和icon-close都是图像，icon-menu在页面上，应该显示菜单，这是一个div. icon-close在菜单div.

HTML: 

<div class="menu">
        <div class="icon-close">
            <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
        </div>
        <div class="link" id="joinLink"><a href="joinPage.html">Join </a></div>
        <div class="link" id="returnsLink"><a href="returns.html">Returns</a></div>
        <div class="link" id="methodsLink"><a href="methods.html">Methods</a></div>
    </div>
    <img class="icon-menu" src="https://cdn1.iconfinder.com/data/icons/web-ui-2/16/UI_Icons_Outline-29-128.png"/>
CSS: 

.menu {
background-color: white;
left: -150px;
top: 150px;
height: 1000px;
position: fixed;
width: 150px;
}
.icon-close{
  height: 20px;
  width:20px;
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;

}
.icon-menu{
    height: 30px;
    width: 30px;
    margin-top: -320px;
    margin-left: 7px;
    float: left;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
}

没有任何HTML结构或CSS，我只是做了这个简单的例子:

首先

，用CSS设置.menu的初始位置。我用position:relative和left:-150px;。

然后在left:0(这将显示.menu)和left:-150px(这将隐藏.menu)之间切换JQ。

我还切换了按钮，使每次只显示一个。

有很多方法可以做到这一点，但我想改变你的代码尽可能少。

你不需要设置body的样式，只需要设置.menu的样式

EDIT:用你的HTML和CSS编辑的片段(修改)

我建议您将icon-menu和icon-close设置在.menu之外。并从.icon-menu中删除margin-top

var main = function () {
    "use strict";
    $('.icon-menu').click(function () {
        $(this).hide()
        $('.icon-close').show()
        $('.menu').animate({
            left: "0"
        }, 200);
       
    });
    $('.icon-close').click(function () {
        $(this).hide()
         $('.icon-menu').show()
        $('.menu').animate({
            left: "-150px"
        }, 200);
        
    });
};
$(document).ready(main);
.menu {
background-color: white;
left: -150px;
top: 40px;
height: 1000px;
position: fixed;
width: 150px;
}
.icon-close{
  height: 30px;
    width: 30px;
    margin-top: 0;
    margin-left: 7px;
    float: left;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    display:none;
}
.icon-menu{
    height: 30px;
    width: 30px;
    margin-top: 0;
    margin-left: 7px;
    float: left;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
     
        <div class="link" id="joinLink"><a href="joinPage.html">Join </a></div>
        <div class="link" id="returnsLink"><a href="returns.html">Returns</a></div>
        <div class="link" id="methodsLink"><a href="methods.html">Methods</a></div>
    </div>
    <img class="icon-menu" src="https://cdn1.iconfinder.com/data/icons/web-ui-2/16/UI_Icons_Outline-29-128.png"/>
    <img class="icon-close" src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png"/>

相关文章：