具有展開效果的下拉引導菜單

Question

我試圖使展開效果的引導菜單下拉菜單處於懸停狀態。

現在我有這個JavaScript，使之下拉列表懸停與滑動效果：

// dropdown hover effect 
$('.navbar .dropdown').hover(function() { 
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown(); 
}, function() { 
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp() 
}); 

這個行之有效的桌面版本，但無法在手機上，並沒有展開的效果。

達到此目的的最佳方法是什麼？通過JavaScript或CSS？

謝謝！

Answer 1

是的，你是正確的在桌面上的代碼效果很好，因爲桌面版支持懸停事件，但移動版本不支持。手機版應該使用點擊事件來處理。

Answer 2

我能做到這樣的效果：

// dropdown hover effect 
if($(window).width() > 768) { 
    $('.navbar .dropdown').hover(function() { 
    $(this).addClass('open'); 
    }, function() { 
    $(this).removeClass('open'); 
    }); 
}; 

和css：

@media (min-width: 768px) { 
    .dropdown .dropdown-menu { 
     -webkit-transition: all 0.5s; 
     -moz-transition: all 0.5s; 
     -ms-transition: all 0.5s; 
     -o-transition: all 0.5s; 
     transition: all 0.5s; 

     max-height: 0; 
     display: block; 
     overflow: hidden; 
     opacity: 0; 
     -webkit-transform: perspective(200px) rotateX(-90deg); 
     -moz-transform: perspective(200px) rotateX(-90deg); 
     transform: perspective(200px) rotateX(-90deg); 
    } 

    .dropdown.open .dropdown-menu { 
     max-height: 250px; 
     opacity: 1; 
     -webkit-transform: perspective(200px) rotateX(0deg); 
     -moz-transform: perspective(200px) rotateX(0deg); 
     transform: perspective(200px) rotateX(0deg); 
     transform-origin: center top; 
    } 
} 

的max-height將取決於你有多少按鈕有在下拉列表中，你越有，更高的高度。