2013-12-18 19 views
0

我正在使用以下jQuery的megamneu。當前的菜單效果是'懸停 - 幻燈片',我想要在查找移動設備或平板電腦時將懸停幻燈片效果更改爲單擊幻燈片。我有HTML.mobile和html.tablet位於我的HTML頭。我如何編寫基於我的html類的條件我可以爲基於HTML類的菜單效果編寫if/else條件嗎?

我想要一個條件,如果html.mobile或html.tablet,然後菜單效果爲'clide-slide',否則菜單效果'懸停 - 幻燈片」

$(document).ready(function($){ 
    $('.megamenu').megaMenuReloaded({ 
     menu_speed_show : 300, // Time (in milliseconds) to show a drop down 
     menu_speed_hide : 0, // Time (in milliseconds) to hide a drop down 
     menu_speed_delay : 100, // Time (in milliseconds) before showing a drop down 
     menu_effect : 'hover_slide', // Drop down effect, choose between 'hover_fade', 'hover_slide', 'click_fade', 'click_slide', 'open_close_fade', 'open_close_slide' 
     menu_easing : 'jswing', // Easing Effect : 'easeInQuad', 'easeInElastic', etc. 
     menu_click_outside : 1, // Clicks outside the drop down close it (1 = true, 0 = false) 
     menu_show_onload : 0, // Drop down to show on page load (type the number of the drop down, 0 for none) 
     menubar_trigger : 0, // Show the menu trigger (button to show/hide the menu bar), only for the fixed version of the menu (1 = show, 0 = hide) 
     menubar_hide : 0, // Hides the menu bar on load (1 = hide, 0 = show) 
     menu_responsive : 1, // Enables mobile-specific script 
     menu_carousel : 0, // Enable/disable carousel 
     menu_carousel_groups : 0 // Number of groups of elements in the carousel 
    }); 
}); 

回答

4

使用條件(又名「三元」)運算符。

$(document).ready(function($){ 
    $('.megamenu').megaMenuReloaded({ 
     menu_speed_show : 300, // Time (in milliseconds) to show a drop down 
     menu_speed_hide : 0, // Time (in milliseconds) to hide a drop down 
     menu_speed_delay : 100, // Time (in milliseconds) before showing a drop down 
     menu_effect : $("html.mobile, html.tablet").length ? 'click_slide' : 'hover_slide', // Drop down effect, choose between 'hover_fade', 'hover_slide', 'click_fade', 'click_slide', 'open_close_fade', 'open_close_slide' 
     menu_easing : 'jswing', // Easing Effect : 'easeInQuad', 'easeInElastic', etc. 
     menu_click_outside : 1, // Clicks outside the drop down close it (1 = true, 0 = false) 
     menu_show_onload : 0, // Drop down to show on page load (type the number of the drop down, 0 for none) 
     menubar_trigger : 0, // Show the menu trigger (button to show/hide the menu bar), only for the fixed version of the menu (1 = show, 0 = hide) 
     menubar_hide : 0, // Hides the menu bar on load (1 = hide, 0 = show) 
     menu_responsive : 1, // Enables mobile-specific script 
     menu_carousel : 0, // Enable/disable carousel 
     menu_carousel_groups : 0 // Number of groups of elements in the carousel 
    }); 
}); 
1

你應該能夠做到這一點,像這樣:

if($(body).width() < 768)) { 
$('.megamenu').megaMenuReloaded({ 
    clide-slide : 'hover_slide', // Drop down effect, choose between 'hover_fade' 
}); 

凡768是平板的寬度。手機也可以做同樣的事情。

相關問題