logo标签列表

在某些移动设备上，通过代码生成的链接/图标没有显示出来。

javascriptandroidcssmobilerepeater
11

更新：

我决定测试一下是否是字体awesome的问题，因此我用普通文本替换了图标：

<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中，我列出了分类，并在其旁边放置了一个小的caret链接（fontawesome），以打开/关闭内部菜单。这是在我的iPhone上的样子：

我的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>
如果您认为这是CSS或JavaScript问题，最好也添加渲染代码。 - Morpheus
你能一并发布CSS吗？ - Nuri Hodges
2个回答
3
请尝试以下解决方案。在锚点标签中加入 onclick="return expandMenu($(this))"，并在 JavaScript 函数的结尾处加入 return 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
我认为你的问题在于你的“.css”文件-需要为链接定义高度。你需要将它们扩展到移动端。
例如：
/* desktop */
.menu a {
height:40px;
}

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

如果您分享您的CSS文件，我会更新我的答案。
你说得对，我没有设置高度。我会看看那是否有效。 - Erica Stockwell-Alpert
你是否使用"display:block"和"display:none;"来制作展开菜单？如果是的话，请尝试使用"visibility:none"和"visibility:visible"。首先请尝试在iPad上使用Chrome而不是Safari。这可能是Safari的问题（JavaScript或CSS）。 - Green Microchip
嗯，好的，我看到你不是唯一在iPad上遇到下拉问题的人。请尝试使用（如果是移动设备）添加“onClick =”return true“。看这里：https://css-tricks.com/forums/topic/css-dropdown-menu-for-the-ipad/ - Green Microchip
如果我已经有一个“onclick”方法，那么我应该把它放在哪里？我的链接设置为<a onclick="expandMenu($(this))">。我只需要在expandMenu()之后加上“return true;”吗？ - Erica Stockwell-Alpert
嗨，尝试使用onclick="expandMenu($(this)); return true;"，但这不是推荐的方法。最好的方法是使用函数处理-请参见Sam4Code的答案。 - Green Microchip
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接