Почему мой переключатель jQuery не работает?

Я пытаюсь настроить боковое меню и иметь некоторые проблемы с jQuery Toggle. Все остальное работает нормально. Я пробовал примерно за 2 часа до публикации здесь, поэтому немного расстроился (видя, как это довольно простой материал). Какие-либо предложения?Почему мой переключатель 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>

Image I нажмите, чтобы открыть меню:

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

Остальная часть моей страницы:

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

Мой CSS & JQuery:

<!--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 верен. У меня есть другой сайт, где работает эта точная функция. Так что я действительно запутался здесь :(.. Я вижу, что ваш пример в кодефее отлично работает, а не справедливо lmao. –

Ну, это точный код, я ссылаюсь на тот, который я публикую в OP: $ (". OpenBtn "). Click (function() { $ (" # SideMenu "). FadeToggle (" fast "," swing "); }); –

Существует возможность того, что Jquery не загружен на странице в то время.

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

источник

2016-10-16 18:02:22

Мне не хватало заголовка ссылки на jQuery –

Мне не хватало заголовок jQuery Теперь, как и было, Qorking :) –

Спасибо за помощь! Хотя ответ Pivemi не был решением, более глубокий обзор его кодовой ссылки заработал, мой документ не звонил в библиотеку 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 не работает?

ответ

Смежные вопросы