Link/icone che vengono generati in codebehind non vengono visualizzati su alcuni dispositivi mobili

Question

UPDATE:

ho deciso di verificare se è stato un problema con fontawesome, quindi ho sostituito le icone con testo in chiaro:

<a href=\"javascript:void(0)\" onclick=\"expandMenu($(this))\" class=\"show-second-level toggle\"><span>V</span></a><a href=\"javascript:void(0)\" onclick=\"retractMenu($(this))\" class=\"hide-second-level toggle\"><span>^</span></a> 

I collegamenti in testo semplice vengono visualizzati su tutti i dispositivi ora e funzionano su Android, ma non funzionano su iPad (facendo clic su di loro non fa nulla).

---

Ho un menu a scomparsa sul mio sito. Nel mio ul, ho elencato le categorie con un piccolo collegamento caret (fontawesome) accanto a loro apri/chiudi il menu interno. Questo è come appare sul mio iPhone:

Menu on my iPhone

Expanded menu

Il bordo rosso si trova sul 'un' tag, quindi l'intera area all'interno del bordo rosso dovrebbe espandere il menu quando si fa clic. Lo fa come previsto su tutti i browser desktop e il mio iPhone. Tuttavia, il mio cliente sta segnalando che non funziona su un iPad, MS Surface Pro o telefono Android. Ci sono diversi problemi su ciascuno. Ho messo il bordo rosso attorno ai collegamenti di espansione per vedere se i collegamenti sono stati mostrati nel posto giusto. Sul tablet, il bordo rosso è lì ma mancano i collegamenti alle frecce. Toccando l'area dove dovrebbero essere non fa nulla. Su Android, il bordo rosso non viene mostrato affatto, e di nuovo, toccando l'area non fa nulla.

Questo è il codice che genera queste voci di menu:

<ul> 
    <asp:Repeater ID="MenuRepeater" runat="server" OnItemDataBound="MenuRepeater_ItemDataBound"> 
     <ItemTemplate> 
      <li <%# (Container.DataItem as LinkData).Class %>> 
       <asp:HyperLink ID="MenuHyperLink" runat="server"> 

       </asp:HyperLink> 

       <%# (Container.DataItem as LinkData).ExpandLinks %>  

       <ul> 
        <asp:Repeater DataSource='<%# DataBinder.Eval(Container.DataItem, "SubLinks") %>' runat="server"> 
         <ItemTemplate> 
          <li <%# (Container.DataItem as LinkData).Class %>> 
           <a href='<%# DataBinder.Eval(Container.DataItem, "Link") %>'><%# DataBinder.Eval(Container.DataItem, "Text") %></a> 
          </li> 
         </ItemTemplate> 

        </asp:Repeater> 
       </ul> 
      </li> 
     </ItemTemplate> 
    </asp:Repeater> 

</ul> 

I ExpandLinks sono ciò che generano le frecce. Li ho posizionati in modo dinamico perché non tutte le voci di menu sono espandibili, quindi il codice inserisce un collegamento di espansione solo se l'elemento ha un sottomenu. Ecco il codice che genera i menu. L'istruzione "se" è la condizione che crea un menu espandibile; il "else" crea un collegamento di base senza menu figlio. La parte importante qui è dove viene definito tempLD.expandLinks.

foreach (var item in sections) 
{ 
    // if we have more than on section, that means we have expandable categories 
    if (sections.Count() > 1 && item != sections.First()) // for second item and on 
    { 
     tempLD = new LinkData(); 
     tempLD.Text = item.SectionTitle; 
     tempLD.Class = "class=\"category expandable\""; 
     autoData.Add(tempLD); 

     if (item.Link != null && item.Link.Any()) 
     { 
      // special case for first-level items: 
      if (item.Link.Count() == 1 && item.Link.FirstOrDefault().a.OuterXML == item.SectionTitle) 
      { 
       tempLD.Link = item.Link.FirstOrDefault().a.href; 
       tempLD.Class = "class=\"\""; 
      } 

      else 
      { 
       tempLD.ExpandLinks = 
        "<a href=\"javascript:void(0)\" onclick=\"expandMenu($(this))\" class=\"show-second-level toggle\"><i class=\"fa fa-caret-down\"></i></a><a href=\"javascript:void(0)\" onclick=\"retractMenu($(this))\" class=\"hide-second-level toggle\"><i class=\"fa fa-caret-up\"></i></a>"; 
       var subLinks = new List<LinkData>(); 
       foreach (var child in item.Link) 
       { 
        var subLink = new LinkData(); 
        subLink.Text = child.a.OuterXML; 
        subLink.Link = child.a.href; 
        subLink.Class = "class=\"category-child\""; 
        subLink.SubLinks = new List<LinkData>(); 

        subLinks.Add(subLink); 
       } 
       tempLD.SubLinks = subLinks; 
      } 
     } 
    } 

    else 
    { 
     tempLD = new LinkData(); 
     tempLD.Text = item.SectionTitle; 
     tempLD.Class = "class=\"sub-parent\""; 
     tempLD.SubLinks = new List<LinkData>(); 
     autoData.Add(tempLD); 

     if (item.Link != null && item.Link.Any()) 
     { 
      foreach (var child in item.Link) 
      { 
       tempLD = new LinkData(); 
       tempLD.Text = child.a.OuterXML; 
       tempLD.Link = child.a.href; 
       tempLD.Class = "class=\"\""; 
       tempLD.SubLinks = new List<LinkData>(); 
       autoData.Add(tempLD); 
      } 
     } 
    } 
} 

Immagino questo deve essere un CSS o JavaScript problema, ma io non so che cosa sta andando male

Ecco il codice HTML che viene visualizzato:

<ul> 
    <li class="active"> 
     <a id="ctl00_MainContentPH_SideBreadcrumb_MenuRepeater_ctl00_MenuHyperLink" href="/Our-Services/">Our Care</a> 
     <ul></ul> 
    </li> 
    <li class="sub-parent"> 
     <span>Specialty Care and Programs</span> 
     <ul></ul> 
    </li> 
    <li class="category expandable"> 
     <span>Programs and Clinics</span> 
     <a href="javascript:void(0)" onclick="expandMenu($(this))" class="show-second-level toggle"><i class="fa fa-caret-down"></i></a><a href="javascript:void(0)" onclick="retractMenu($(this))" class="hide-second-level toggle"><i class="fa fa-caret-up"></i></a> 
     <ul> 
      <li class="category-child"> 
       <a href="/Our-Services/Programs-and-Clinics/Birthmark-Treatment-Program/">Birthmark Treatment Program</a> 
      </li> 
      <li class="category-child"> 
       <a href="/Our-Services/Programs-and-Clinics/Cancer-and-Blood-Disorders-Center/">Cancer and Blood Disorders Center</a> 
      </li> 
      <li class="category-child"> 
       <a href="/Our-Services/Programs-and-Clinics/Craniofacial-Reconstruction-Program/">Craniofacial Reconstruction Program</a> 
      </li> 
     </ul> 
    </li> 
    <li class="category expandable"> 
     <span>Rehabilitative Services and Therapy</span> 
      <a href="javascript:void(0)" onclick="expandMenu($(this))" class="show-second-level toggle"><i class="fa fa-caret-down"></i></a><a href="javascript:void(0)" onclick="retractMenu($(this))" class="hide-second-level toggle"><i class="fa fa-caret-up"></i></a> 
      <ul> 
       <li class="category-child"> 
        <a href="/Our-Services/Rehabilitative-Services-and-Therapy/Occupational-Therapy/">Occupational Therapy</a> 
       </li> 
       <li class="category-child"> 
        <a href="/Our-Services/Rehabilitative-Services-and-Therapy/Physical-Therapy/">Physical Therapy</a> 
       </li> 
       <li class="category-child"> 
        <a href="/Our-Services/Rehabilitative-Services-and-Therapy/Specialty-Therapy-Services/">Specialty Therapy Services</a> 
       </li> 
      </ul> 
     </li> 
     <li class="last "> 
      <a id="ctl00_MainContentPH_SideBreadcrumb_MenuRepeater_ctl04_MenuHyperLink" href="/Our-Doctors/Medical-Specialists/">Medical Specialists</a> 
      <ul></ul> 
     </li> 
    </ul> 

Answer 1

Credo che il problema è nel tuo file ".css" - definisci l'altezza dei tuoi collegamenti. Dovrai espanderli per il cellulare.

Per esempio

/* desktop */ 
.menu a { 
height:40px; 
} 

/* mobile */ 
@media only screen and (max-width : 480px) { 
.menu a { 
height:auto; 
max-height:60px; 
} 
} 

Se si condivide stai css file-io aggiornare la mia risposta.

Answer 2

Si prega di provare la seguente soluzione.Anchor tag onclick = "return expandMenu ($ (this))" e in funzione javascript alla fine della funzione write return true.

tempLD.ExpandLinks = 
 
        "<a href=\"javascript:void(0)\" onclick=\"return expandMenu($(this))\" class=\"show-second-level toggle\"><i class=\"fa fa-caret-down\"></i></a><a href=\"javascript:void(0)\" onclick=\"return retractMenu($(this))\" class=\"hide-second-level toggle\"><i class=\"fa fa-caret-up\"></i></a>"; 
 

 

 
function expandMenu(ele) 
 
{ 
 

 
// Your code goes here 
 

 

 
return true; 
 

 
} 
 

 
function retractMenu(ele) 
 
{ 
 

 
// Your code goes here 
 

 

 
return true; 
 

 
}