Question

我正在使用移动菜单，我几乎完成了代码。还没有完成，因为我的js中存在一个小问题：有时，切换动画的按钮不会改变，它会破坏菜单。

我认为它只是一个简单的切换顺序，或者＆＃34;，; }＆＃34;遗失或错误的地方...

本周我开始学习js，我在过去的4个小时里试图自己解决，但没有成功。你能帮助我吗？！这是代码和JSFiddle。

•HTML

<div id="mobilecabecalho">SITE TITLE</div>
<div id="mobilebotao-x">✖</div>
<div id="mobilebotao">☰</div>

<div id="mobilemenu">

      - INÍCIO     </br>    
      - PORTIFÓLIO </br>
      - ORÇAMENTO  </br>
      - QUEM SOMOS

•CSS

html, body{
   margin:0px;
   width:100%;
}

#mobilecabecalho{
    height:72px;
    width:100%;
    background:#B6212D;
    position:fixed;
    z-index:-1;
    text-align:center;
    line-height:72px;
    color:#fff;
    font-family:times+new+roman;
    font-style: italic;
    font-weight: 100;
    letter-spacing:5px;
    font-size:42px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


#mobilemenu {
    position:absolute;
    left:100px;
    background:#177F75;
    width:122px;    
    height:102px;
    top:72px;
    font-family:helvetica;
    line-height:25px;
    padding:10px;
    color:#fff;
    font-weight: bold;
    border-radius:0px 0px 10px 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


#mobilebotao{
    position:fixed;
    z-index:2;
    height:72px;
    width:72px;
    background:#B6212D;
    line-height:72px;
    color:#fff;
    font-weight: bold;
    font-family:helvetica;
    font-size:40px;
    text-align:center;
    box-shadow: inset 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#mobilebotao-x{
    position:fixed;
    z-index:3;
    height:72px;
    width:72px;
    background:#B6212D;
    line-height:72px;
    color:#fff;
    font-weight: bold;
    font-family:helvetica;
    font-size:40px;
    text-align:center;
    box-shadow: inset 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

•JS

$("#mobilemenu").css({"left": "-142px",opacity: 0.25})
$( "#mobilebotao-x" ).hide();

$("#mobilebotao").toggle(

    function () { 
        $("#mobilemenu").animate({"left": "0px",opacity: 1,}, 50); 
        $( "#mobilebotao-x" ).show();
    },

    function () { 
    }
);



$("#mobilebotao-x").toggle(

    function () { 
        $("#mobilemenu").animate({"left": "-142px",opacity: 1,}, 50); 
        $("#mobilebotao-x").hide();
    },

    function () { 
        $("#mobilemenu").animate({"left": "0px",opacity: 0.25}, 50);
    }
);

我知道也许还有另一种简单的方法来做我想做的事情，但是，这几乎是＆＃34;几乎＆＃34;我自己的代码，我想让它工作：）

Answer 1

您现在习惯点击这样的事件现在，您点击菜单并显示，为您的代码设置动画。

$("#mobilemenu").css({"left": "-142px",opacity: 0.25})
$( "#mobilebotao-x" ).hide();



$('#mobilebotao').click(function(){
    $( "#mobilebotao-x" ).show();
    $( "#mobilebotao" ).hide();
    $('#mobilemenu').animate({"left": "+0px",opacity: 1}, 50);    
});

$('#mobilebotao-x').click(function(){
    $( "#mobilebotao" ).show();
    $( "#mobilebotao-x" ).hide();
    $('#mobilemenu').animate({"left": "-142",opacity: 0.25}, 50);    
});

现在我已经创建了一个演示版，您可以查看 click here

Js - 切换两个div并为一个div设置动画

1 个答案: