2013-12-18 2 views
0
<script> 
$(function() { 
    var pull = $('#pull'); 
    menu = $('nav ul'); 
    menuHeight = menu.height(); 

    $('#pull').click(function (e) { 
     e.preventDefault(); 
     menu.slideToggle(); 
    }); 

    $('.link').click(function (e) { 
     e.preventDefault(); 
     menu.slideToggle('1200'); 
    }); 

    $(window).resize(function() { 
     var w = $(window).width(); 
     if (w < 600 && menu.is(':hidden')) { 
      menu.removeAttr('style'); 
      enter code here 
     } 
    }); 
}); 
</script> 

<nav class="clearfix"> 
    <ul class="clearfix"> 
     <li><a href="#home" class="link">Home</a></li> 
     <li><a href="#about" class="link">How-to</a></li> 
     <li><a href="#work" class="link">Icons</a></li> 
     <li><a href="#contact" class="link">Design</a></li> 
    </ul> 
<a href="#" id="pull"><img src="images/logo.png"/></a> 
</nav> 

Я нашел этот код в Интернете из учебника, и я подправил его немного, чтобы сделать это, что я хочу навигацию do.I Возникает проблемы с возможностью переключения это меню вверх и вниз. Я хочу, чтобы это было, где я нажимаю на id #pull, что он будет переключаться вниз и показывать мне ссылки. Затем, когда я нажимаю на ссылку, я хочу, чтобы она включала резервную копию и скрывала ссылки, но я хочу, чтобы она делала это только для адаптивного аспекта навигации, а не когда она находится на обычном изображении. Он переключает, является ли он отзывчивым или нет. ПОЖАЛУЙСТА ПОМОГИТЕ!Раздвижного джойстик вверх и вниз JQuery выпуск

Вот ссылка на файлы http://www.mediafire.com/download/cz1q3rg3fqm5pxh/Demo-Files.7z

+0

меню и menuHeight не объявленный с варом. – Mark

+0

@Mark, так как я могу исправить эту проблему, поэтому она работает, как я хочу? –

ответ

0

триггера как ответно

var menu = $('nav ul'), plink = $('#pull, .link'), go; 
function acdc() { 
    var ww = $(window).width(); 
    if (ww>600 && go) {//on desktop 
     if (menu.is(':hidden')) { menu.removeAttr('style'); } 
     plink.unbind(); 
     go=false; 
    } else if (ww<600 && !go) {//on small screen 
     plink.on('click', function(e) { 
      e.preventDefault(); 
      menu.slideToggle(); 
     }); 
     go=true; 
    } 
} 
acdc(); 
$(window).resize(function() { acdc(); }); 

сделал скрипку: http://jsfiddle.net/filever10/Lt9V3/

+0

Я пробовал использовать этот код, чтобы он срабатывал как реагировать, так и он все еще работал неправильно? –

+0

Он не отображал никаких ошибок в консоли в Google Chrome. Но с этим кодом он сможет выполнить, вероятно, в запросах на медиа, которые я настроил, поэтому, когда я нажимаю на #pull, он будет переключаться вниз, а затем, когда я нажму на одну из пяти ссылок, он переключится обратно вверх? Я просто хочу, чтобы это делалось в медиа-запросах, а не в настольном запросе. –

+0

похоже, что он должен быть несвязанным на ходу, обновленный ответ. – FiLeVeR10

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