2011-02-27 2 views
1

반응 적 디자인을 위해 jQuery를 사용하여 브라우저 창이 작을 때 탐색 메뉴를 선택 목록으로 변환합니다. 그러나 선택 목록의 옵션을 선택하면 웹킷 기반 브라우저의 Firefox 및 Opera에서 해당 페이지로 리디렉션되고 옵션을 선택해도 아무 것도 수행되지 않습니다.jQuery 응답 생성 Chrome에서 작동하지 않는 선택 메뉴

라이브 데모 - http://emoeco.com

$('ul.menu').each(function(){ 

       var action="loadPage(this.form.elements[0])"; 
       var form=$(document.createElement('form')).insertBefore($(this)); 
       $(form).attr({ 
       method: 'post' 
       }); 
       var select=$(document.createElement('select')).appendTo(form); 
       $(select).attr("onchange", action); 
       $('>li a', this).each(function(){ 
       var a=$(this).click(function(){ 
       window.location.href=this.href; 
       }), 
       option=$(document.createElement('option')).appendTo(select).val(this.href).html($(this).html()).click(function(){ 
       a.click(); 
       }); 
       }); 

       }); 
+0

해당 페이지에 오류가 많이 있습니다. 오류. 하나의 자바 스크립트 오류로 인해 전체 자바 스크립트가 중지 될 수 있습니다. – Ray

답변

1

먼저 자바 스크립트 콘솔을 열고 오류에 보일 것입니다. 대부분은 파일을 찾을 수 없기 때문입니다.

둘째, 머리 태그를 보면 나를 조금 밖에 죽지 않게됩니다. 나는 이것이 당신의 질문의 목적이 아니라는 것을 안다. 그러나 당신은 똑같은 것을 두 번 이상로드함으로써 엄청난 간접비를 창출한다. 그것을 고치는 데 필요한 5 분을 보내십시오. 사이트가 백만 배나 더 빨리로드됩니다.

셋째, 귀하의 질문을 올바르게 이해하면 사용자가 페이지를 가로 질러 버튼을 클릭해야하는 방식으로해야합니다. 또한 메뉴를 완전히 제거하는 대신 확대/축소하지 않는 것이 어떻습니까?

넷째, Thirds를 싫어하는 경우 전체 앵커를 덤프하고 select의 기본 'change'이벤트를 사용하는 것이 좋습니다.

$('select').change(function() { 
    location.href = $(this).children('option:selected').val(); 
}); 

편집 : 그들은 '옵션'요소에 클릭 이벤트를 묶어하지 않기 때문에 그것은 단지 웹킷에서 작동하지 않는 이유에 관해서는, 그것의. 적어도 그게 내가 생각하는 것 : this example (URL에 추가/수정하여 소스 코드를 볼 수 있습니다.) FireFox에서 작동하는 것으로 테스트되었지만 Chrome에서 아무 것도 얻지 못했습니다.

관련 문제