Liên kết/biểu tượng được tạo ra trong codebehind không hiển thị trên thiết bị di động nhất định

Question

UPDATE:

tôi đã quyết định để kiểm tra nếu nó là một vấn đề với fontawesome, vì vậy tôi thay thế các biểu tượng với văn bản đơn giản:

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

Các liên kết văn bản thuần túy hiện đang hiển thị trên tất cả các thiết bị và đang hoạt động trong Android, nhưng chúng không hoạt động trên iPad (cách nhấp vào chúng không hoạt động).

---

Tôi có một menu có thể thu gọn trên trang web của mình. Trong ul của tôi, tôi có các loại được liệt kê với một liên kết caret nhỏ (fontawesome) bên cạnh chúng mở/đóng menu bên trong. Đây là cách nó trông giống trên iPhone của tôi:

Menu on my iPhone

Expanded menu

Các đường viền màu đỏ là trên 'a' thẻ, do đó toàn bộ khu vực bên trong đường viền màu đỏ nên mở rộng menu khi nhấp vào. Nó thực hiện điều này như mong đợi trên tất cả các trình duyệt máy tính để bàn và iPhone của tôi. Tuy nhiên, khách hàng của tôi báo cáo rằng nó không hoạt động trên iPad, MS Surface Pro hoặc điện thoại Android. Có vấn đề khác nhau trên mỗi. Tôi đặt đường viền màu đỏ xung quanh các liên kết mở rộng để xem liệu các liên kết có hiển thị ở đúng vị trí hay không. Trên máy tính bảng, đường viền màu đỏ ở đó nhưng các liên kết mũi tên bị thiếu. Khai thác khu vực mà họ không nên làm gì. Trên Android, đường viền màu đỏ không hiển thị ở tất cả, và một lần nữa, việc khai thác trong khu vực không có gì.

Đây là mã mà tạo ra những mục 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> 

Các ExpandLinks là gì tạo ra các mũi tên. Tôi đã đặt chúng vào động bởi vì không phải tất cả các mục menu đều có thể mở rộng, do đó, mã chỉ đặt một liên kết mở rộng tại chỗ nếu mục đó có menu phụ. Đây là mã tạo ra các menu. Câu lệnh "if" là điều kiện tạo ra một menu có thể mở rộng; "else" tạo liên kết cơ bản không có menu con. Phần quan trọng ở đây là nơi tempLD.expandLinks được định nghĩa.

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

tôi con số này phải là một CSS hay vấn đề javascript, nhưng tôi không biết những gì đang xảy ra sai

Đây là HTML được hiển thị:

<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

Tôi nghĩ vấn đề của bạn nằm trong tệp ".css" - xác định chiều cao cho Liên kết của bạn. Bạn sẽ phải mở rộng chúng cho thiết bị di động.

Ví dụ

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

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

Nếu bạn chia sẻ bạn đang css-file tôi sẽ cập nhật câu trả lời của tôi.

Answer 2

Hãy thử giải pháp sau. Thẻ gắn trên onclick = "return expandMenu ($ (this))" và trong hàm javascript ở cuối hàm ghi trả về 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; 
 

 
}