JQuery菜單不會滑動

所以我寫了一個滑動菜單的代碼，只有我有一個問題，它不滑動。我的JQuery有什麼問題嗎？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>

來源

2012-08-26 atl

嘗試，而不是.toggle – Dom

動畫函數中的第二個屬性是以毫秒爲單位的時間，沒有附加任何單位。

將其更改爲

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

評論後編輯： 要使其收回你需要修復的回縮代碼太

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

至於重疊問題，設置的z-index ：1;在#menu和位置：相對;和z-index：0;無論你想要它重疊。只要這些元素在HTML嵌套方面處於同一水平。如果您遇到問題，請查看z-index上的一些教程。

來源

2012-08-26 04:29:48

我很想.slideToggle看到他們在javascript中放置像'px'這樣的單元的日子lol –

你實際上可以在jQuery中指定單位。 px是默認值。你的代碼有什麼問題，500是動畫的時間，我毫秒，所以把像素放在那裏:) –

我在說'px'是javascript語法的一部分 –

這裏是修復：http://pastebin.com/raw.php?i=SUz4FkzL

我只是做了完全相同的變化做出裏克，所以你應該給他「接受」

來源

2012-08-26 15:33:04 sgerbhctim

當您在打開它後單擊該選項卡時，您是否遇到了無法收回的問題？ – atl

你是什麼意思？ – sgerbhctim

JQuery菜單不會滑動

回答

相關問題