0

所以我为滑动菜单编写了这段代码，只是我遇到了一个问题，它不是滑动的。我的 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>
4

2 回答 2

1

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

将其更改为

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

评论后编辑： 要使其收回，您也需要修复收回代码

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

至于重叠问题，设置z-index: 1；在#menu 和位置：相对；和z-index：0；在任何你想要它重叠的地方。只要这些元素在 HTML 嵌套方面处于同一级别。如果您遇到问题，请查看有关 z-index 的一些教程。

于 2012-08-26T04:29:48.460 回答
1

这是修复：http ://pastebin.com/raw.php?i=SUz4FkzL

我刚刚做了和瑞克一样的改变，所以你应该给他“接受”

于 2012-08-26T15:33:04.827 回答