js build menu arrow image not show in mobile browser

Bubble_bub 1 Reputation point
2022-11-15T02:10:59.967+00:00

I have a code below to append an image into my menu which create in Site.master, it's work find in desktop web browser, hover the drop down menu shown but the arrow image not shown when browse using mobile browser. It make the drop down not able to show up when user click on the menu in mobile browser

var jquerycssmenu={  

    fadesettings: {overduration: 350, outduration: 100}, //duration of fade in/ out animation, in milliseconds  

   buildmenu:function(menuid, arrowsvar){  
   jQuery(document).ready(function($){  
   var $mainmenu=$("#"+menuid+">ul")  
  var $headers=$mainmenu.find("ul").parent()  
  $headers.hover(  
     function (e) {  
             if (!$(this).children('a:eq(0)').hasClass('selected')) {  
                  $(this).children('a:eq(0)').addClass('selected');  
              }  
      },  
       function (e) {  
        if ($(this).children('a:eq(0)').attr('rel') != "yes") {  
           $(this).children('a:eq(0)').removeClass('selected')  
      }  
    }  
 )  
$headers.each(function(i){  
var $curobj=$(this)  
var $subul=$(this).find('ul:eq(0)')  
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}  
this.istopheader=$curobj.parents("ul").length==1? true : false  
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})  
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(  
  '<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])  
     +'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])  
    + '" style="border:0;" />'  
   )  
   $curobj.hover(  
         function(e){  
              var $targetul=$(this).children("ul:eq(0)")  
             this._offsets={left:$(this).offset().left, top:$(this).offset().top}  
             var menuleft=this.istopheader? 0 : this._dimensions.w  
             menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -   
             this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft  
                  $targetul.css({left:menuleft+"px"}).fadeIn(jquerycssmenu.fadesettings.overduration)  
          },  
         function(e){  
              $(this).children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration)  
          }  
       ) //end hover  
     }) //end $headers.each()  
      $mainmenu.find("ul").css({display:'none', visibility:'visible'})  
    }) //end document.ready  
   }  
}  

 //build menu with ID="myjquerymenu" on page:  
 jquerycssmenu.buildmenu("myjquerymenu", arrowimage  
Not Monitored
Not Monitored
Tag not monitored by Microsoft.
37,748 questions
0 comments No comments
{count} votes