하위 메뉴에서 드롭 다운 메뉴가 사라짐

Question

나만의 드롭 다운 메뉴 클래스를 만들지 만 여기에 몇 가지 버그가 있습니다. 하위 메뉴에서 마우스를 끌면 모든 메뉴가 사라집니다. 여기 내 Mootools의 코드입니다 :

var DynamicMenu = new Class({ 

    initialize: function(el) { 
     this.element = el; 
     this.timer = null; 

     this.element.addEvents({ 
      'mouseover': this.enter.bind(this), 
      'mouseout': this.leave.bind(this) 
     }); 

    }, 
    enter: function() { 
     var that = this; 
     this.timer = setTimeout(function(){ 
      $$(".top-nav")[0].addClass("index_1001"); 
      var columns = that.element.getChildren(".dropDownCol")[0]; 
      var catalog = that.element.getChildren(".dropDownCatalog")[0]; 
      if (columns != null) { 
       columns.show(); 
      } 
      if (catalog != null) { 
       var columns2 = that.element.getChildren(".dropDownCatalog ul li .catalogNaviInner")[0]; 
       if (columns2 != null) { 
        columns2.show(); 
       } 
       catalog.show(); 
      } 
      if(columns != null || catalog != null){ 
       $$('div.wrapper.tal')[0].adopt(new Element('div', { 
        'class': 'owerlay' 
       })); 
      } 
     },500); 
    }, 
    leave: function() { 
     this.stopTimer(); 
     if($$('.owerlay')[0] != null){ 
      $$('.owerlay').destroy(); 
     } 
     $$(".top-nav")[0].removeClass("index_1001"); 
     var columns = this.element.getChildren(".dropDownCol")[0]; 
     var catalog = this.element.getChildren(".dropDownCatalog")[0]; 
     if (columns != null) { 
      columns.hide(); 
     } 
     if (catalog != null) { 
      catalog.hide(); 
     } 
    }, 
    stopTimer: function() { 
     if (this.timer != null) { 
      clearTimeout(this.timer); 
      this.timer = null; 
     } 
    } 
}); 

if ($$(".top-nav > li")[0] != null) { 
    Array.each($$('.top-nav > li'), function(element){ 
     new DynamicMenu(element); 
    }); 
} 

그리고 여기 내 HTML 코드입니다 : finddle에서

<ul class="block-list top-nav "> 
    <li> 
     <a class="topLink" href="/link" title="Menu"><span class="arrowDown">Menu Menu</span></a> 
     <div class="dropDownCol" style="width: 190px; z-index: 1001; display: none;"> 
     <div class="fl column"> 
      <ul> 
       <li class="groupHeading "><a href="/link">Menu 1</a></li> 
      </ul> 
      <ul> 
       <li class="groupHeading "><a href="/link">Menu 2</a></li> 
      </ul> 
      <ul> 
       <li class="groupHeading "><a href="/link">Menu 3</a></li> 
      </ul> 
      <ul> 
       <li class="groupHeading "><a href="/link">Menu 4</a></li> 
      </ul> 
     </div> 
     <div class="clear"></div> 
     </div> 
    </li> 
</ul> 

내 모든 작업 코드는 : 내가 실수를 할 http://jsfiddle.net/UBuq5/8/

?

Answer 1

대신 순수 CSS를 사용하여이를 달성 할 수 있습니다. 당신의 CSS에 다음을 추가

.dropDownCol { 
    display: none; 
} 
.top-nav > li:hover .dropDownCol { 
    display: block; 
} 

는 JS 제거하고, 또한 .dropDownCol에서 인라인 display: none;를 제거합니다.

여기에 업데이트 된 바이올린의 : http://jsfiddle.net/UBuq5/10/

이 터치 장치 (아무 가져가) 작동하지 않습니다,하지만 당신은 클릭/탭에 hover 클래스를 전환하고 그에 따라 CSS를 업데이트하여 시뮬레이션 할 수 있습니다.