UPDATE:
Я решил проверить, была ли проблема с 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>
