jQuery 드롭 다운 - 추가 클래스를 가리 키시겠습니까?

이것은 간단한 드롭 다운 esq 메뉴의 jquery입니다. 그래도 문제가 있습니다. .SubMenu div 위로 마우스를 올려 놓았을 때 사용자가 아래로 머무를 때 .mainMenuDiv 위로 마우스를 가져 가면 div가 아래로 내려갑니다.jQuery 드롭 다운 - 추가 클래스를 가리 키시겠습니까?

도움말! :)

$(function() { 
      var tabContainers = $('div.subMenu > div'); 
      tabContainers.hide(); 

      $('.mainMenuDiv a').hover(
      function() { 
       tabContainers.filter(this.hash).stop(true, true).slideDown(); 
      }, 
      function(){ 
       tabContainers.filter(this.hash).stop(true, true).slideUp(); 
      }); 
    }); 


<div class="mainMenu" align="center"> 
    <table cellpadding="0" cellspacing="0" border="0" width="950"> 
     <tr> 
      <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/new/#new" class="mainMenuLink" id="1">I'm New</a></td> 
      <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/ministries/#ministries" class="mainMenuLink">Ministries</a></div></td> 
      <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/beliefs/#beliefs" class="mainMenuLink">Beliefs+Mission</a></div></td> 
      <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/listen/#listen" class="mainMenuLink">Listen</a></div></td> 
      <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/connect/#contact" class="mainMenuLink">Connect</a></div></td> 
      <td width="100%"></td> 
     </tr> 
    </table> 
</div> 
    <div class="subMenu"> 
     <div id="new"> 
      <h2>I'm New</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div>

이 나는 HTML이 큰 아니라는 것을 알고 ...하지만 이것은 내가 작업을해야 할 것입니다 ...

출처

2009-09-29 Kevin Brown

HTML을 게시 할 수 있습니까? –

, 내가 예를 들어, hover 반대로 그냥 mouseover 이벤트를 사용해야합니다 생각 .

출처

2009-09-29 13:22:28 karim79

거의 완벽합니다. .subMenu 또는 링크가 아닌 다른 것이 덮혀있을 때 어떻게 닫을 수 있습니까? (본질적으로 마우스 아웃?) –

@ 케빈 브라운 - 내 편집을 참조하십시오, 그렇게해야합니다. 또는 두 번째 마우스 오버시 선택기에서 '본문'대신 'html'을 사용할 수 있습니다. 희망이 그것을 해결합니다. – karim79

거의 다! 메뉴에서 하위 메뉴로 마우스를 빠르게 이동하지 않으면 하위 메뉴가 사라지지 않습니다. 아마도 테이블 때문에 (... 짧은 시간 초과 기능으로 문제를 해결할 수 있습니까? 아니면 hoverIntent 플러그인일까요? 고객이 테이블을 유지하기를 원하므로이 작업을 수행해야합니다. –

내가 내가 제대로 이해 있는지 확실하지 않습니다,하지만 당신은 할 수 체인 선택기를 함께 사용하여 간단한 쉼표. 나도 당신의 HTML 코드를 게시하시기 바랍니다 뭔가를 누락하는 경우

그래서 아마도이

$('.mainMenuDiv a, div.subMenu > div').hover(

을 작동합니다. 마우스가 다른 링크를 돌 때까지

이제

$(function() { 
     var tabContainers = $('div.subMenu > div'); 
     tabContainers.hide(); 

     $('.mainMenuDiv a').mouseover(function() { 

      //hide all the containers 
      tabContainers.slideUp(); 

      //slide this one down 
      tabContainers.filter(this.hash).stop(true, true).slideDown(); 
     }); 

     //slide up the container when the mouse is over anything else 
     $('body :not("div.subMenu > div, .mainMenu a")').mouseover(function() { 
      tabContainers.slideUp(); 
     }); 
});

, '현재는'하나가 열려있을 것입니다 : 만약 내가 제대로 이해하고

출처

2009-09-29 13:16:25 32423hjh32423

jQuery 드롭 다운 - 추가 클래스를 가리 키시겠습니까?

답변

관련 문제