Question

我有一个（无序）列表（由转发器生成）的项目。但是，我想展示前三个项目，其余部分由main content div隐藏。当按下一个按钮时，我希望列表的div扩展，按下main content div并显示列表的其余部分。我正在考虑使用slideDown（），但这会关闭整个div（我希望显示列表的前3项）。实现这样效果的最佳方法是什么？是否有插件可以轻松显示列表中的X项目，并根据请求显示其余项目？

由于

编辑：添加当前代码：

   <div id="name_links">
        <asp:Repeater ID="rptName" runat="server">
        <ItemTemplate>
        <ul class="ul_links">
        <li>

        <a id="aName"  runat="server" href=<%# Eval("Name")%> >
    <%# Eval("Name")%> 
      </a>

        </li>
        </ul>
        </ItemTemplate>
        </asp:Repeater>
    </div>

<div id="main_content" >
...
</div>

我试图添加这个JQuery，但它似乎没有拿起任何链接：

    $("ul.ul_links").each(function() {
        $(this).children("li:gt(3)").hide();

        alert("Testing"); //This never gets called. 
    });

Answer 1

您的项目模板看起来不对

应该是

 <div id="name_links">
     <ul class="ul_links">
    <asp:Repeater ID="rptName" runat="server">
    <ItemTemplate>
    <li>

    <a id="aName"  runat="server" href=<%# Eval("Name")%> ><%# Eval("Name")%> 
  </a>

    </li>
    </ItemTemplate>
   </asp:Repeater>
  </ul>
</div>

然后jquery将能够根据需要显示和隐藏。

你创建ul的集合的另一种方式 - ＆gt; li标签。

Answer 2

这可以通过jQuery来完成，但它有助于查看标记的示例。

这是一个link，展示了如何使用ul / li标签来完成它。你应该能够将它调整到自己的标记而不会有太多麻烦。

通常，您使用以下内容隐藏第4项和第4项

$('div:gt(2)').hide(); //index starts at 0

您必须修改jquery选择器以适合您的标记，并且可以将其放在$(document).ready()块中，以便在页面加载时隐藏项目。

显示/隐藏列表的一部分

2 个答案: