个人中心
gpt4 book ai didi

JQuery 菜单不会滑动

转载 作者：太空宇宙 更新时间：2023-11-04 04:57:27 25 4
gpt4 key购买 nike

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

最佳答案

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

改成

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

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

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

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

关于JQuery 菜单不会滑动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12127581/

25 4 0
文章推荐： c - Win32 : Toolbar dialog seems to never get focus and causes the main window to process slow?
文章推荐： python - 不在python中写入文件
文章推荐： c++ - MAPISendMail 不插入发件人
文章推荐： c - GCC 打印 cc1 而不是行号