slideDown jQuery導航div

Question

我想獲得像以下網站上的導航工作。 link

我對JSFIDDLE到目前爲止有以下代碼，並有它的工作。唯一的問題是當第二次懸停在子菜單li上時（或者循環通過它們），新的背景div不會再次下降。

大加讚賞任何建議 - 感謝

編輯：

我已經簡化這裏的演示jsfiddle.net/XLZGP/11只是主菜單項。我正在尋找新的顏色滑入，而舊的顏色不滑動。

代碼如下

HTML

<header> 
<div class="inner-header"> 
    <nav> 
     <ul> 
      <li class="parent"> <a href="#" title="bus">bus</a> 

       <div class="locations-wrapper"> 
        <ul class="sub-menu"> 
         <li><a href="#" title="station">station</a> 

         </li> 
         <li><a href="#" title="stop">stop</a> 

         </li> 
        </ul> 
       </div> 
      </li> 
      <li class="parent"> <a href="#" title="train">train</a> 

       <div class="locations-wrapper"> 
        <ul class="sub-menu"> 
         <li><a href="#" title="station">station</a> 

         </li> 
         <li><a href="#" title="stop">stop</a> 

         </li> 
        </ul> 
       </div> 
      </li> 
     </ul> 
    </nav> 
</div> 
<div class="boxes"> 
    <div class="bus"></div> 
    <div class="bus-station"></div> 
    <div class="bus-stop"></div> 
    <div class="train"></div> 
    <div class="train-station"></div> 
    <div class="train-stop"></div> 
</div> 
</header> 

JS

var parentList = $('.parent'); 
var currentTitle; 
var currentChildTitle; 

parentList.on('mouseover', function() { 
    $(this).find('.locations-wrapper').slideDown(400); 
    currentTitle = $(this).find('a').attr('title'); 
    $('.' + currentTitle).addClass('open').slideDown(400); 

}); 

parentList.on('mouseleave', function() { 
    $(this).find('.locations-wrapper').slideUp(400); 
    $('.boxes').children('div').removeClass('open').slideUp(400); 
}); 

$('.sub-menu').on('mouseover', 'li', function() { 
    currentChildTitle = $(this).find('a').attr('title'); 
    currentChildTitle = currentTitle + '-' + currentChildTitle; 
    $('.boxes').children('div').removeClass('open'); 
    $('.' + currentChildTitle).addClass('open').slideDown(400); 
});` 

Answer 1

採取了不同的方法，並決定通過JS動態創建滑動div背景 - 創建每個dom節點，然後將其分配給dom，限制生成的總數。

用下一個覆蓋每個div。 WORKING JSFIDDLE

var parentList = $('.parent'); 

// declare variables 
var currentChildTitle; 
var currentTitle; 
var banner; 

// setup append div function 
function dropBanner(currentTitle) { 
    // create the banner variable dom node 
    banner = $('<div class="' + currentTitle + '"/></div>'); 
    // add it to the dom 
    $('.boxes').append(banner); 
    // animate it 
    $('.' + currentTitle).slideDown(300); 
} 

// setup a function to limit the number of divs appended 
function chop() { 
    if ($('.boxes div').length > 15) { 
     $('.boxes div').eq(0).remove(); 
    } 
} 

// listen for mouseover the parent list items 
parentList.on('mouseover', function (e) { 

    if (!($(this).find('.locations-wrapper').is(':visible'))) { 
     $(this).find('.locations-wrapper').slideDown(300); 
    } 

    // grab the current list item title 
    currentTitle = $(this).find('a').attr('title'); 

    // call dropBanner passing the current list item title 
    dropBanner(currentTitle); 
    chop(); 

}); 

// listen for mouseleave 
parentList.on('mouseleave', function() { 
    $(this).find('.locations-wrapper').delay(300).slideUp(300); 
    $('.boxes div').delay(300).slideUp(300); 
}); 

// listen for mouseover the submenu list items 
$('.sub-menu').on('mouseover', 'li', function (e) { 

    // grab the current list item title 
    currentTitle = $(this).find('a').attr('title'); 

    // call dropBanner passing the current list item title 
    dropBanner(currentTitle); 
    chop(); 

    // stop the bubbling up effect to parent list items 
    e.stopPropagation(); 
}); 

Answer 2

你沒有mouseleave處理程序的子菜單項，所以一旦他們下來，他們」重新下降。

我太小提琴添加一個快速mouseleave的子菜單的 - 應該是確切的療效首發你想實現：

http://jsfiddle.net/XLZGP/

$('.sub-menu').on('mouseleave', 'li', function() { 
    currentChildTitle = $(this).find('a').attr('title'); 
    currentChildTitle = currentTitle + '-' + currentChildTitle; 
    $('.' + currentChildTitle).removeClass('open').slideUp(400); 
}); 

Answer 3

我想你在找什麼對於東西接近這個，http://jsfiddle.net/un5ke/1/

var mouseLeft = true; 

$('.sub-menu').on('mouseleave', 'li', function() { 
    mouseLeft = true; 
    setTimeout(function() { 
     if (mouseLeft) { 
      var toClose = $('.boxes').children('div.open'); 
      toClose.slideUp(); 
      toClose.removeClass('open'); 
     } 
    }, 500); 
}); 

$('.sub-menu').on('mouseover', 'li', function() { 
    mouseLeft = false; 

    currentChildTitle = $(this).find('a').attr('title'); 
    currentChildTitle = currentTitle + '-' + currentChildTitle; 
    var toOpen = $('.' + currentChildTitle); 

    if (!toOpen.hasClass('open')){ 
     var toClose = $('.boxes').children('div.open'); 

     toOpen.addClass('open').slideDown(400, function completed() { 
      $(toClose).slideUp();    
      $(toClose).removeClass('open'); 
     }); 
    } 
}); 

有一對夫婦的事情，我已經做了：

1. 刪除的z-index從公開課
2. 增加了半秒延遲到鼠標離開，因此，如果人從一個鼠標移動到另一個背景不發瘋。
3. 刪除了目前不是問題的整個菜單的鼠標滾輪。
4. 打開之前仔細檢查當前菜單尚未打開。