/**
* Created by Administrator on 2017/5/15.
*/
$(document).ready(function () {
   var sub = $('#sub')

   var activeRow
   var activeMenu
   
   var timer

   var mouseInSub = false

   sub.on('mouseenter',function (e) {
       mouseInSub = true
   }).on('mouseleave',function (e) {
       mouseInSub = false
   })

   $('#test')
       .on('mouseleave','li',function (e) {
           sub.addClass('none')

           if(activeRow){
               activeRow.removeClass('active')
               activeRow=null
           }

           if(activeMenu){
               activeMenu.addClass('none')
               activeMenu=null
           }
       })
       .on('mouseenter','li',function (e) {
           sub.removeClass('none')

           if(!activeRow){
               activeRow=$(e.target).addClass('active')
               activeMenu = $('#' + activeRow.data('id'))
               activeMenu.removeClass('none')
               return
           }

           timer = setTimeout(function () {
               if(mouseInSub){
                   return
               }

               activeRow.removeClass('active')
               activeMenu.addClass('none')

               activeRow = $(e.target)
               activeRow.addClass('active')
               activeMenu = $('#' + activeRow.data('id'))
               activeMenu.removeClass('none')
           },3000)

       })
});