jQuery 토글이 작동하지 않는 이유는 무엇입니까?

사이드 메뉴를 설정하고 jQuery Toggle에 문제가 있습니다. 다른 모든 기능이 제대로 작동하는 것 같습니다. 나는 약 2 시간 동안 여기에서 게시하기 전에 시험했다. 그래서 조금 실망했다 (이것이 꽤 기초적인 물건 인 방법을 보아라). 어떤 제안?jQuery 토글이 작동하지 않는 이유는 무엇입니까?

다음은 내 페이지 레이아웃의 형식과 정확한 순서이며, 읽기/이해를 쉽게하기 위해 분리 문자 ("사이드 메뉴", "이미지 클릭 .."등) 만 추가했습니다. 어떤 도움이라도 대단히 감사하겠습니다.

사이드 메뉴 :

<img class="OpenBtn" src="./blk_menu.png" />

내 페이지의 나머지 :

<div id="main"> 
My main page content goes here... 
</div>

내 CSS & jQuery를 :

<div id="SideMenu" class="sidenav"> 
    <img class="CloseBtn" src="./wht_menu.png" /> 
    <a href="#">Link 1</a> 
    <a href="#">Link 2</a> 
    <a href="#">Link 3</a> 
    <a href="#">Link 4</a> 
    <a href="#">Link 5</a> 
</div>

이미지가 나는 메뉴를여십시오

<!--Slider Menu--> 
<script> 
$(".OpenBtn").click(function() { 
$("#SideMenu").fadeToggle("fast", "swing"); 
}); 
</script> 
<style> 
#SideMenu{ 
width: 250px; 
display: none; 
} 
</style>

출처

2016-10-16 Anonymous

콘솔에 오류가 있습니까? –

토글이 잘 작동하고 있습니다. https://jsfiddle.net/Dezain/zc1pvyy3/1/ – Thielicious

jQuery 버전은 무엇입니까? 이것을 참조하십시오 : http://stackoverflow.com/questions/6372798/fadetoggle-not-working – Giliapps

-1

귀하의 CSS는 다음과 같이 수 :

.menu { 
position: fixed; 
height: 100%; 
width: 272px; 
padding-bottom: 50px; 
overflow: auto; 
box-shadow: 0 0 10px 0 rgba(0,0,0,.75); 
background-color: #fff; 
z-index: 999; 
display: none;}

그리고 당신의 jQuery 스크립트를

$(document).ready(function(){ 
$('.show-menu').click(function(){ 
    fade_menu(); 
}); 
$('.menu-item').click(function(){ 
    fade_menu(); 
});});}); 

function fade_menu(){ 
     $('.menu').fadeToggle("fast"); 
}

출처

2016-10-16 17:53:08 HerrMotz

메뉴 항목을 만드는 좋은 방법을 찾으십시오. 그리고 제발, 메뉴 버튼에 png를 사용하지 마시오. – HerrMotz

이것은 OP의 질문에 "왜이 코드가 작동하지 않습니까?"라고 대답하지 않습니다. – Turnip

실례합니다. @pivemi는 이미 왜 작동하지 않는지 설명 했으므로 나는 그에게 예제를 줄 수 있다고 생각했습니다. – HerrMotz

을 당신은이 블록에서 jQuery를 포장 (docs)가 필요합니다 :

$(document).ready(function() { 
    $(".OpenBtn").click(function() { 
    $("#SideMenu").fadeToggle("fast", "swing"); 
    }); 
});

코드를 사용한 작업 예제 :

http://codepen.io/anon/pen/xEaqqA

출처

2016-10-16 17:55:18 pivemi

그럴 필요가 없다. – Thielicious

게시하기 전에 이것을 시도했지만, 그러나 TheDefinitionist는 정확합니다. 이 정확한 기능이 작동하는 또 다른 사이트가 있습니다. 그래서 저는 정말로 여기에 혼란스러워하고 있습니다. (.. 나는 codepen에서의 당신의 모범이 위대한, 공정한 lmao가 아니라는 것을 보았습니다. –

음,이 정확한 코드는 제가 OP에 게시 한 것을 말합니다 : $ (". }); –

jQuery를이 시간에 페이지에로드되지 가능성이 있습니다.

<script> 
(function($){ 
    $(document).ready(function(){ 
     $(".OpenBtn, .CloseBtn").click(function() { 
      $("#SideMenu").fadeToggle("fast", "swing"); 
     }); 
    }); 
})(jQuery); 
</script>

출처

2016-10-16 18:02:22

jQuery에 대한 헤더 링크가 누락되었습니다. –

jQuery 헤더가 누락되었습니다 (예 : "OpenBtn"). (function() # $ ("# SideMenu" 링크. 지금 Qorking :) –

여러분 모두를 도와 주셔서 감사합니다! pivemi의 대답은 해결책이 아니었지만 그의 codepen 링크에 대한 심층적 인 검토를 통해 문제가 해결되었습니다. 제 의사가 jQuery 라이브러리를 호출하지 않았습니다. 이것을 상단에 추가하면 내 해결책이되었습니다.

<head> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
</head>

출처

2016-10-16 18:05:59

jQuery 토글이 작동하지 않는 이유는 무엇입니까?

답변

관련 문제