부트 스트랩 3 반응 형 드롭 다운 호버 메뉴가 모바일에서 작동하지 않습니다.

Question

드롭 다운 하위 메뉴 항목이있는 반응 형 메뉴를 만들고 싶습니다. 지금까지는 데스크톱에서 작동하지만 모바일에서는 작동하지 않습니다 (iPhone 5에서 테스트 중입니다). 나는이 방법의 문제를 해결하기 위해 노력

<nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand page-scroll" href="#page-top" style="padding-top: 0px !important"> 

     </a> 
    </div> 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav navbar-right"> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu1</a> 
     <ul class="dropdown-menu"> 
     <li> 
      <a href="#">Submenu1</a> 
     </li> 
     <li> 
      <a href="#">Submenu2</a> 
     </li> 
     <li> 
      <a href="#">Submenu3</a> 
     </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Menu2</a> 
    </li> 
    <li> 
     <a href="#">Menu3</a> 
    </li> 
    <li> 
     <a href="#">Menu4</a> 
    </li> 
    <li> 
     <a href="#">Menu5</a> 
    </li> 
    </ul> 
</div> 

: 여기

내 코드입니다 내가 jQuery를 추가하려고

1. (하지만 난 나는 좋은 코드 만 쓰는 것이 좋지 않다는 것을 깨달았습니다.) - "listenWidth()"를 사용 했어야한다는 것을 알았지 만, 실제로 어떻게 해야할지 모르겠습니다.

function dropdown() { 
    if ($(window).width() >= 780) { 
    jQuery('ul.nav li.dropdown').hover(function() { 
     jQuery(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn(); 
    }, function() { 
     jQuery(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut(); 
    }); 
} 
} 

// Execute on load 
dropdown(); 
// Bind event listener 
$(window).resize(dropdown); 

2

나는 숨겨진-XS, 눈에 보이는-XS와 함께하려고 노력하지만 잘 작동하지 않았다.

도와주세요!

덕분에, F

Answer 1

이 코드는 괜찮아 보인다. bootsrtap JS 전에 jQuery 라이브러리를 추가했는지 확인하십시오.

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 

http://codepen.io/pavithraolety/pen/vKbGXL/

귀하의 JQuery와 조각이 필요하지 않습니다 :

나는 다음과 내가 XS 폭에 브라우저 크기를 조정할 때 코드가 작동을 추가했다. 드롭 부트 스트랩을 열려면

Answer 2

이를 제거/추가해야 제대로 열,

그래서

<li class="dropdown"> 

에 클래스 "열기"를 추가합니다.

$('a.dropdown-toggle').hover(function(e) { 
    $('li.dropdown').toggleClass('open'); 
}) 

다음 단계는 부모 클래스 togglign을 적용하는 것입니다.

$('a.dropdown-toggle').hover(function(e) { 
    $(e.currentTarget).parent().toggleClass('open'); 
}) 

다음은이 터치러를 터치 스크린에서 실행해서는 안됩니다 ... 휴대 기기를 TV + 마우스로 연결할 수 있다는 것을 명심하십시오. 즉 확인하고 처리하기 어렵지만, 당신이 그것에 대해 걱정하지 않는 경우에, 당신이 모바일 화면 크기 및 테스트에 데스크톱 브라우저의 크기를 조정