更新：
我决定测试它是否与fontawesome有关，所以我用纯文本替换了图标：
<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>
纯文本链接现在显示在所有设备上并且在Android中运行，但它们不在iPad上工作（点击它们什么也不做）。
我的网站上有一个可折叠的菜单。在我的ul中，我列出的类别旁边有一个小插入链接（fontawesome）打开/关闭内部菜单。这就是我在iPhone上的样子：
红色边框位于＆＃39; a＆＃39;标签，因此红色边框内的整个区域应该在单击时展开菜单。它在所有桌面浏览器和我的iPhone上按预期执行此操作。但是，我的客户报告称它无法在iPad，MS Surface Pro或Android手机上运行。每个都有不同的问题。我在展开链接周围放置了红色边框，以查看链接是否显示在正确的位置。在平板电脑上，红色边框在那里，但缺少箭头链接。挖掘它们应该在的区域什么都不做。在Android上，红色边框根本没有出现，再次点击该区域什么也没做。
这是生成这些菜单项的代码：
<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>
ExpandLinks是生成箭头的原因。我将它们动态放置，因为并非所有菜单项都是可扩展的，因此如果项目具有子菜单，则代码仅放置扩展链接。这是生成菜单的代码。 ＆＃34;如果＆＃34; statement是创建可扩展菜单的条件; ＆＃34;其他＆＃34;创建一个没有子菜单的基本链接。这里的重要部分是定义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);
}
}
}
}
我认为这必须是CSS或javascript问题，但我不知道出了什么问题
以下是呈现的HTML：
<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>
答案 0 :(得分：3)
请尝试以下解决方案.Anchor tag onclick =“return expandMenu（$（this））” 并在函数末尾的javascript函数中写回返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;
}
答案 1 :(得分：1)
我认为你的问题出现在你的“.css”文件中 - 定义你的链接的高度。你必须为移动设备扩展它们。
例如
/* desktop */
.menu a {
height:40px;
}
/* mobile */
@media only screen and (max-width : 480px) {
.menu a {
height:auto;
max-height:60px;
}
}
如果你分享你的css文件，我会更新我的答案。