我的身邊的左邊的菜單不工作

我試圖展示一個左邊的菜單，基於我在谷歌上看到的一個例子，但是當我點擊我的「菜單」打開側面菜單時，菜單不會打開。我的身邊的左邊的菜單不工作

這是我的HTML，在那裏我有一個div ID =「菜單」，也就是我的菜單，我想在我的身邊左邊的菜單顯示。

我也有一個div id =「content」，這是一個包含我所有內容的div，我想將這個內容向右推當我點擊我的「菜單」打開左側的菜單。

<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
</head> 
<div id="menu"> 
     <ul> 
      <li><a href="#">Menu Item 1</a></li> 
      <li><a href="#">Menu Item 2</a></li> 
      <li><a href="#">Menu Item 3</a></li> 
     </ul> 
</div> 
<div id="content"> 
     <div id="menubar"> 
      <div id="open_menu"> 
       Menu 
      </div> 
     </div> 
</div>

下面是jQuery的，打開我的身邊左邊的菜單有一個切換緩慢elffect和我的菜單的文本改變菜單關閉，當菜單打開。

$('#open_menu').toggle( 
    function() { 
     $('#content').animate({ left: 250 }, 'slow', function() { 
      $('#open_menu').html('Close'); 
     }); 
    }, 
    function() { 
     $('#content').animate({ left: 0 }, 'slow', function() { 
      $('#open_menu').html('Menu'); 
     }); 
    } 
);

您是否看到哪裏可以解決問題？

我撥弄問題： http://jsfiddle.net/3Gezv/

來源

2014-05-13 UserX

這也不是什麼撥動了...看看jQuery的文檔： http://api.jquery.com/toggle/

只要使用click事件和跟蹤的狀態自己的一個方法或其他。這是根據您的撥弄工作示例：

$('#open_menu').click(function(){ 
    if ($(this).hasClass('toggled_on')) { 
     $(this).removeClass('toggled_on'); 
     $('#content').animate({ left: 0 }, 'slow', function() { 
      $('#open_menu').html('Menu'); 
     }); 
    } else { 
     $(this).addClass('toggled_on'); 
     $('#content').animate({ left: 250 }, 'slow', function() { 
      $('#open_menu').html('Close'); 
     }); 
    } 
});

它使用一類是次優的，所以，除非你需要其他的東西只使用一個變量來代替。

來源

2014-05-13 20:10:27 Mikk3lRo

非常感謝。它像我想要的那樣工作，但我真的認爲切換對此很好！ – UserX

您可能可以使用它，但我相信您對動畫的控制會較少。 '.toggle（）'雖然可以切換你調用它的元素（這就是爲什麼按鈕在原來的小提琴中消失了），所以你可以這樣做：'$（'＃open_menu'）。click（function（）{ $（「＃content」）。toggle（）}）'（切換內容，而不是菜單） – Mikk3lRo

我的身邊的左邊的菜單不工作

回答

相關問題