타이머가있는 부 메뉴를 표시 할 때의 문제

저는 자바 스크립트를 처음 사용하니 제발 나와 함께하시기 바랍니다.타이머가있는 부 메뉴를 표시 할 때의 문제

나는 html, css 및 javascript (JQuery 없음) 조합을 사용하여 드롭 다운 탐색 메뉴를 만드는 중입니다. 네비게이션 바의 두 링크는 onMouseover를 드롭 다운하는 서브 메뉴를 가지고 있으며 마우스를 움직일 때까지 서브 메뉴를 열어두기 위해 setTimeout과 clearTimeout을 사용하고 있습니다.

여기에 제가 가지고있는 문제가 있습니다. 탐색 표시 줄의 링크 위로 마우스를 가져 가면 해당 하위 메뉴가 표시되고 마우스를 계속 유지하면 표시됩니다. 바로 마우스를 내비게이션 막대의 다음 링크로 이동하면 해당 링크의 하위 메뉴가 나타납니다. 그러나 가장 짧은 순간 만 사라집니다. 거기에 내 타이머 설정에 기여하는 뭔가가 있지만 그것을 찾을 수 없습니다. 누군가 내가 변화해야 할 상황을 파악할 수 있습니까?

나는 여기 너무 지나치다는 것을 알고 있으며, 사과합니다. 내가 무엇인가를 명확히하기 위해 나를 필요로하면, 나에게 알려주세요.

여기 내 자바 스크립트 코드입니다.

function drop(menu) { 
    if (menuId) 
     menuId.style.display = 'none'; 

    menuId = document.getElementById(menu); 
    menuId.style.display = 'block'; 
    menuId.style.position = 'relative'; 
    menuId.style.top = '100%'; 
    menuId.style.left = '0'; 

} 

function beginTimer() { 
    timer = window.setTimeout(hide, 500); 
} 

function timerToZero() { 
    if (timer) { 
     window.clearTimeout(timer); 
     timer = 0; 
    } 
} 

function hide() { 
    if (menuId) 
     menuId.style.display = 'none'; 
}

내 html 코드가 왔습니다. 관련 항목을 표시하기 위해 목록 항목을 축약했습니다.

<ul class="nav"> 
    <li><a href="DepartmentMembers.html" onMouseover="drop('departmentMenu')" onMouseout="beginTimer()">Department Members</a> 
     <ul id="departmentMenu" onMouseover = "timerToZero()" onMouseout = "beginTimer()" style="display:none;position:absolute"> 
      <li><a href="BrianKendricks.html">Brian Kendricks</a></li> 
      <li><a href="TimJones.html">Tim Jones</a></li> 
      <li><a href="DavidKline.html">David Kline</a></li> 
     </ul> 
    </li> 

    <li><a href="SystemsUsed.html" onMouseover="drop('systemMenu')" onMouseout="beginTimer()">Systems Used</a> 
     <ul id="systemMenu" onMouseover = "timerToZero()" onMouseout = "beginTimer()" style="display:none;position:absolute"> 
      <li><a href="OrgChart.html">Organizational Chart of Library Systems</a></li> 
      <li><a href="3M.html">3M Cloud (e-books)</a></li> 
      <li><a href="Bibliotheca.html">Bibliotheca (DVD Checkout)</a></li> 
     </ul> 
    </li> 
</ul>

은 내 code의 나머지는 내 문제에 대한 해결책을 알아 냈 JSFiddle

출처

2015-02-01 donfrankrice

에서 찾을 수 있습니다! 나는 타이머 라인

timer = window.setTimeout(hide, 500);

에서 살펴 본다 결국 나는 내가 나를 위해 큰 차이를 만들어

timer = window.setTimeout(hide, 100);

로 변경 시도해야한다고 결정!

출처

2015-02-03 01:09:40 donfrankrice

타이머가있는 부 메뉴를 표시 할 때의 문제

답변

관련 문제