2014-11-24 4 views
0

Мне это кажется странным. Я не мог понять, почему.jQuery Slide Toggle Меню не работает

Прежде всего, я помещаю файлы js на <head>. Нечто подобное ниже:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>

Кроме того, мой код для навигации по меню, как показано ниже:

Для HTML

<ul class="mainMenu"> 
     <li>LINK 1 
      <ul class="subMenu"> 
      <li>SUB LINK 1</li> 
      <li>SUB LINK 2</li> 
      <li>SUB LINK 3</li> 
      <li>SUB LINK 4</li> 
      </ul> 
     </li> 
     <li> LINK 2 </li> 
    </ul> 

Для JS:

$(document).ready(function(){ $('.mainMenu').children('li').on('click', function() { $(this).children('ul').slideToggle('slow'); }); }

И CSS:

.subMenu { display: none; }

Вот JSFIDDLE. Он работает в JSFiddle, но он не работает на моем сервере. Мне интересно, почему. Есть идеи?

+0

первая нагрузка <сценарий SRC = "http://code.jquery.com/jquery-1.9.1.js"> – Balachandran

+0

@Bala хорошо, я попробовал, и она по-прежнему не работает. Можете ли вы просмотреть обновленный вопрос, поскольку я реорганизую вопрос. – Anthosiast

ответ

0

Я не уверен, что это так или нет. Вы должны поместить свой код внутри

$(document).ready(function(){ // here }); 

Так что ваши говорят JQuery, чтобы загрузить/манипулировать DOM элементов после всех HTML-элементов были загружены.

Теперь пришло время, почему ваш your fiddle работает.

Его, потому что, $ (документ) .ready (функция() {}); он уже встроен в js panal jsFiddle. Так что любой jQuery, который вы пишете на этой панели, все это войдет внутрь $ (document) .ready (function() {// here}), что означает, что весь ваш код будет запущен после того, как страница закончит загрузку.

Примечание:И, конечно, поддерживать порядок при загрузке сценариев соответственно, как вы не хотите, чтобы вызвать функцию, которая не была загружена еще точно.

+0

Можете ли вы проверить обновленный вопрос еще раз? Я сделал то, что ты попросил меня сделать. Это все еще не работает. – Anthosiast

+0

О, я пропустил последние цитаты. Спасибо вам за это! – Anthosiast

0

Должен быть загружен первым

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 

Когда Jquery загружается, загрузите другие компоненты

<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script> 
+0

хорошо, я попробовал, и он все еще не работает. Можете ли вы просмотреть обновленный вопрос, поскольку я реорганизую вопрос. – Anthosiast

0

сначала загрузить JQuery, JQuery мигрирует является плагин так загрузить после того, как основы Jquery

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script> 

заверните код в готовом документе

$(document).ready(function(){ 
     $('.mainMenu').children('li').on('click', function() { 
     $(this).children('ul').slideToggle('slow'); 
     }); 
    }); 
___ ^--- not close 
+0

Да, это работает. Благодаря! – Anthosiast

+0

@ Anthosiast Рад помочь вам – Balachandran

0

Добавить код ниже и просто попробовать еще раз, он должен работать или нет?

$(document).ready(function(){ 
    $('.mainMenu').children('li').on('click', function() { 
     $(.subMenu).css("display", "block"); 
     $(this).children('ul').slideToggle('slow'); 
    }); 
}); 
Смежные вопросы