Question

更新：

我决定测试它是否与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上的样子：

Menu on my iPhone

Expanded menu

红色边框位于＆＃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>

Answer 1

请尝试以下解决方案.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;

}

Answer 2

我认为你的问题出现在你的“.css”文件中 - 定义你的链接的高度。你必须为移动设备扩展它们。

例如

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

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

如果你分享你的css文件，我会更新我的答案。

在代码隐藏中生成的链接/图标未显示在某些移动设备上

2 个答案: