2017-06-22 69 views
0

我使用此代碼在左側創建菜單,但在IE 11上無法正常工作,僅適用於Firefox,Chrome,Edge和所有其他主要瀏覽器。jQuery touchstart與IE上的nicescroll發生衝突

請幫助我嗎?

當我觸摸IE11上的類.morph-main-menu-button-wrapper菜單不顯示任何東西。

但是,如果我在這個圖標上雙擊觸摸菜單顯示!

刪除所有的JS代碼的問題之後是nicescrool:

(function($){ 
$(document).ready(
function() { 
$("html").niceScroll({ 
cursorcolor:  "#40A9F2", 
cursorwidth:  "12px", 
cursorborder:  "0px solid #000", 
cursorborderradius: "3px", 
scrollspeed:  90, 
autohidemode:  true, 
background:   '#ddd', 
hidecursordelay: 400, 
cursorfixedheight: false, 
cursorminheight: 20, 
enablekeyboard:  true, 
horizrailenabled: false, 
bouncescroll:  true, 
smoothscroll:  true, 
iframeautoresize: true, 
emulatetouch:  false, 
hwacceleration: true 
}); 
} 
);})(jQuery); 

如何使用nicescroll如果使觸摸衝突?

jQuery('.morph-main-menu-button-wrapper, .morph-main-menu-activator').on('touchstart touches touchend click', function(e) { 
'use strict'; 
    e.preventDefault(); 
     if(jQuery('.morph-main-wrapper').hasClass('morph-main-wrapper-active')) 
     {  
      /* hide morph slide */ 
      jQuery('.morph-main-wrapper').removeClass('morph-main-wrapper-active'); 
      /* hide morph background */ 
      jQuery('.morph-main-background').removeClass('morph-main-background-active'); 
      /* hide background overlay */ 
      jQuery('.morph-background-overlay').removeClass('morph-background-overlay-active'); 
      /* hide expanded menu button */ 
      jQuery('.morph-main-menu-button-wrapper').removeClass('morph-menu-active'); 

      /* when menu de-activated, animate main menu items */ 
      jQuery('.morph-menu-wrapper').removeClass('morph-menu-wrapper-active'); 

      /* hide search field close button */ 
      jQuery('.morph-search-close-wrapper').removeClass('morph-search-close-wrapper-active'); 
      /* hide search field */ 
      jQuery('.morph-search-wrapper').removeClass('morph-search-wrapper-active'); 
      jQuery('.morph-search-wrapper #searchform #s').blur(); 
      /* show search button */ 
      jQuery('.morph-search-button').removeClass('morph-search-button-hidden'); 

      /* hide secondary menu */ 
      jQuery('.morph-secondary-menu-wrapper').removeClass('morph-secondary-menu-wrapper-active'); 
      /* secondary menu button inactive state */ 
      jQuery('.morph-secondary-menu-button').removeClass('morph-secondary-menu-button-active'); 
     } else {   
      /* show morph slide */ 
      jQuery('.morph-main-wrapper').addClass('morph-main-wrapper-active'); 
      /* show morph background */ 
      jQuery('.morph-main-background').addClass('morph-main-background-active'); 
      /* show background overlay */ 
      jQuery('.morph-background-overlay').addClass('morph-background-overlay-active'); 
      /* hide expanded menu button */ 
      jQuery('.morph-main-menu-button-wrapper').addClass('morph-menu-active'); 

      /* when menu activated, animate main menu items */ 
      jQuery('.morph-menu-wrapper').addClass('morph-menu-wrapper-active'); 
     } 
}); 

回答

0

由於與風格不適用這個問題讓我相信有東西在你的CSS未在IE渲染。你的JavaScript本身看起來很好,應該觸發所有的事件。嘗試添加觸摸更安全。

你也可以使用$來referancce jQuery的,使得

  jQuery('.morph-menu-wrapper').removeClass('morph-menu-wrapper-active'); 

成爲 $('.morph-menu-wrapper').removeClass('morph-menu-wrapper-active');

+0

沒什麼,但如果我在這個圖標上雙擊觸摸菜單顯示!只有單點觸摸不靈,雙觸摸=右擊我覺得在觸摸設備上 – user3477026

+0

好的問題是nicescrool \t (函數($){$ (文件)。就緒( 函數(){$ ( 「HTML」) .niceScroll({ cursorcolor:\t \t 「#40A9F2」, cursorwidth:\t \t 「12px的」, cursorborder:\t \t 「0像素固體#000」, cursorborderradius: 「3PX」, scrollspeed:\t \t 90, autohidemode:\t \t true, 背景:\t \t '#ddd', hidecursordelay:\t 400, cursorfixedheight:\t假, cursorminheight:\t 20, enablekeyboard:\t真, horizrailenabled:\t假, bouncescroll:\t \t真, smoothscroll: \t \t真, iframeautoresize:\t真, emulatetouch:假, hwacceleration:真 }); } );})(jQuery); – user3477026