Question

所以我为滑动菜单编写了这段代码，只是我有一个问题，它没有滑动。我的JQuery有问题吗？

我尝试搜索这个答案，因为其他人似乎也有同样的问题，但我仍然无法找到我写错的内容。

<html> <head> <meta charset="utf-8" />  
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript"> 
    $(document).ready(function() {
        $("#tab").toggle(function() { 
            $('#menu').animate({ left: '0' }, 500px);
            $("#tab").html('-');
        }, function() {
            $('#menu').animate({ left: '-600' }, 500px);
            $("#tab").html('+');
        }); });     
    </script>   
    <style type="text/css">             
    #menu{
        position:absolute;
        top:50px;
        left:-100%;
        height:520px;
        width:100%;
        background-color:#000000;
        text-align:center;
        margin:0px;
        font-family:helvetica;
        color:#FFFFFF
        opacity:.9;  
    }       
    a{ 
            padding-right:60px; 
            text-decoration:none;
            margin:40px;
            color:#FFFFFF
    } 
    h1{
        font-size:20px;
        padding:40px;
        color:#FFFFFF
        text-margin:50px;
        } h2{
        font-size:60px;
        padding:70px;
        color:#FFFFFF 
    } 
    h3{
        font-size:15px;
        padding:50px;
        color:#FFFFFF 
    }               
    #tab{
        position:absolute;
        height:90px;
        width:90px;
        right:-80px;
        top:0px;
        background-color:#000000;
        font-family:helvetica;
        color:#FFFFFF;
        font-size:50px;
        cursor:pointer; 
    }           
    </style>    
</head> 
<body>  
    <div id="menu"><h1>     
        <a class="navItem" href="url">title</a>                 
        <a class="navItem" href="url">title</a>                         
        <a class="navItem" href="url">title</a>                         
        <a class="navItem" href="url">title</a>                         
        <a class="navItem" href="url">title</a></h1>            
        <h2>name</h2>               
        <h3>website title</h3>              
        <div id="tab"> +        
        </div>  
</body>

</html>

Answer 1

animate函数中的第二个属性是以毫秒为单位的时间，不附加任何单位。

将其更改为

$('#menu').animate({ left: '0' }, 500);

评论后编辑： 要使其缩回，您还需要修复撤销代码

$('#menu').animate({ left: '-600' }, 500);

对于重叠问题，设置z-index：1;在#menu和位置：相对;和z-index：0;无论你想要什么重叠。只要这些元素在HTML嵌套方面处于同一级别。如果你遇到麻烦，请查看z-index上的一些教程。

Answer 2

以下是修正：http://pastebin.com/raw.php?i=SUz4FkzL

我和Rick做了同样的改变，所以你应该给他“接受”

JQuery菜单不会滑动

2 个答案: