내 왼쪽 메뉴가 작동하지 않습니다.

Google에서 보여주는 예를 기반으로 왼쪽 메뉴를 사용하려하지만 내 "메뉴"를 클릭하여 옆 메뉴를 열면 메뉴가 열리지 않습니다.내 왼쪽 메뉴가 작동하지 않습니다.

내 div id = "menu"가 있는데, 내 왼쪽 메뉴에 표시하려는 메뉴입니다.

또한 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/

그냥 클릭 이벤트를 사용하고 상태를 추적을 스스로 하나의 방법 또는 다른. 여기 바이올린을 기반으로 작동하는 예는 다음과 같습니다

$('#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

내 왼쪽 메뉴가 작동하지 않습니다.

답변

관련 문제