Verbindungen/Symbole, die in Code-Behind erzeugt werden, werden nicht angezeigt auf bestimmte mobile Geräte

Question

UPDATE:

entschied ich mich zu testen, ob es ein Problem mit fontawesome war, so ersetzte ich die Symbole mit Klartext:

<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> 

Die Nur-Text-Links werden jetzt auf allen Geräten angezeigt und funktionieren unter Android, aber auf dem iPad funktionieren sie nicht (das Anklicken macht nichts).

---

Ich habe ein reduzierbares Menü auf meiner Website. In meiner ul, habe ich Kategorien mit einem kleinen Caret Link (Fontawesome) neben ihnen geöffnet/schließen Sie das innere Menü. Dies ist, wie es auf meinem iPhone aussieht:

Menu on my iPhone

Expanded menu

Die rote Grenze auf dem ‚a‘ Tag ist, so dass der gesamte Bereich innerhalb der roten Umrandung sollte das Menü erweitern, wenn darauf geklickt. Dies geschieht auf allen Desktop-Browsern und auf meinem iPhone wie erwartet. Mein Client meldet jedoch, dass er auf einem iPad, MS Surface Pro oder Android-Telefon nicht funktioniert. Es gibt verschiedene Probleme bei jedem. Ich legte den roten Rand um die Erweiterungslinks, um zu sehen, ob die Links am richtigen Ort angezeigt wurden. Auf dem Tablet ist der rote Rand vorhanden, aber die Pfeillinks fehlen. Tippen Sie auf den Bereich, wo sie sein sollten, tut nichts. Auf Android-Geräten wird der rote Rand nicht angezeigt.

Dies ist der Code, der diese Menüpunkte erzeugt:

<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> 

Die ExpandLinks sind, was die Pfeile erzeugen. Ich habe sie dynamisch eingefügt, weil nicht alle Menüpunkte erweiterbar sind, so dass der Code nur dann eine erweiterte Verknüpfung einfügt, wenn das Element ein Untermenü hat. Hier ist der Code, der die Menüs generiert. Die "if" -Anweisung ist die Bedingung, die ein erweiterbares Menü erstellt; Das "else" erstellt eine einfache Verknüpfung ohne untergeordnetes Menü. Der wichtige Teil hier ist, wo tempLD.expandLinks definiert ist.

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); 
      } 
     } 
    } 
} 

Ich stelle dar, das ein CSS oder Javascript Problem sein muss, aber ich weiß nicht, was falsch läuft

Hier ist der HTML-Code, wiedergegeben wird:

<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

Ich denke, Ihr Problem ist in deiner ".css" -Datei - definiere die Höhe für deine Links. Sie müssen sie für das Handy erweitern.

Für Beispiel

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

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

Wenn Sie teilen Sie CSS-Datei werde ich meine Antwort aktualisieren.

Answer 2

Bitte versuchen Sie folgende Lösung.Anchor tag onclick = "return expandMenu ($ (this))" und in JavaScript-Funktion am Ende der Funktion schreiben zurück wahr.

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; 
 

 
}