Eri*_*ert 11 javascript css mobile android repeater
更新:
我决定测试它是否与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上的样子:
红色边框位于"a"标记上,因此红色边框内的整个区域应在单击时展开菜单.它在所有桌面浏览器和我的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是生成箭头的东西.我将它们动态放置,因为并非所有菜单项都是可扩展的,因此如果项目具有子菜单,则代码仅放置扩展链接.这是生成菜单的代码."if"语句是创建可扩展菜单的条件; "else"创建一个没有子菜单的基本链接.这里的重要部分是定义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>
小智 1
我认为你的问题出在你的“.css”文件中 - 定义链接的高度。您必须为移动设备扩展它们。
例如
/* desktop */
.menu a {
height:40px;
}
/* mobile */
@media only screen and (max-width : 480px) {
.menu a {
height:auto;
max-height:60px;
}
}
如果您分享您的 css 文件，我会更新我的答案。