Question

我想动态填充List并在我将鼠标悬停在按钮上时显示列表

<div class="invite">
    <asp:Button ID="Button1" runat="server" Text="Invite"  CssClass="invite-link"/>
    <div class="invite-drop">
        <div class="holder">
            <ul runat="server">
                <li>
                    <a href="#">
                        <img src="images/img3.png" width="22" height="22" alt="image description" />
                        <span>Chris Robin</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/img3.png" width="22" height="22" alt="image description" />
                        <span>Danny Defoee</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/img3.png" width="22" height="22" alt="image description" />
                        <span>Gustav Lee</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/img3.png" width="22" height="22" alt="image description" />
                        <span>Eric Rees</span>
                    </a>
                </li>
            </ul>
            <a class="select" href="#">Or select friend</a>
        </div>
    </div>
</div>

我的列表如下，我正在尝试动态构建它：

HtmlGenericControl list = new HtmlGenericControl("ul");
for (int i = 0; i < 3; i++)
{
    HtmlGenericControl listItem = new HtmlGenericControl("li");
    HtmlGenericControl anchor = new HtmlGenericControl("a");
    Image im = new Image();
    //im.ImageUrl = ds.Tables[0].Rows[1].ItemArray.ToString();
    anchor.Attributes.Add("href", "");
    anchor.Controls.Add(im);
    anchor.InnerText = "TabX";
}

编辑：

enter image description here

我已成功从代码隐藏中传输列表但是格式化不正确想要将图像一个显示在另一个之下

我的问题是如何将其转移到aspx设计页面？并将其显示在悬停事件

上

请帮忙

Answer 1

将动态创建的ul从服务器端添加到Page控件集合或页面上的任意位置，默认情况下通过css或内联样式display:none隐藏它。将id或class提供给ul，这将有助于在客户端找到该元素。

在客户端，您可以使用$('ul.classname')或$('#listId)找到它，然后在悬停事件中使用show()显示它，并根据您的要求进行定位。

根据您的代码。

将ID设为ul

<ul ID="list" runat="server">

请注意，在for循环中，您应该将锚添加到列表控件。

    for (int i = 0; i < 3; i++)
    {
        HtmlGenericControl listItem = new HtmlGenericControl("li");
        HtmlGenericControl anchor = new HtmlGenericControl("a");
        Image im = new Image();
        //im.ImageUrl = ds.Tables[0].Rows[1].ItemArray.ToString();
        anchor.Attributes.Add("href", "");
        anchor.Controls.Add(im);
        anchor.InnerText = "TabX";

        list.Controls.Add(anchor);
     }

的js

$('.invite-link').hover(function(){
     $('#list').show();
}, function(){
     $('#list').hide();
});

将代码从代码转移到aspx页面

1 个答案: