显示/隐藏列表的一部分答案

【问题标题】：Display/Hide part of a list显示/隐藏列表的一部分
【发布时间】：2010-05-12 01:58:26
【问题描述】：

我有一个（无序的）项目列表（由中继器生成）。但是，我想显示前三个项目，并将其余的项目隐藏在 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. 
    });

【问题讨论】：

你在$("ul.ul_links").each(....);里面$(document).ready(...)吗？
嗨。是的，它在$(document).ready(...) 里面。那里还有其他代码可以很好地执行。

标签： asp.net javascript jquery list repeater

【解决方案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 -> li 标签集的另一种方式。

【讨论】：

我尝试将<ul> 标签移到外面，但没有成功。除了第一个项目，CSS 也破坏了所有项目。除非，我的 CSS 错误（因为我一直在使用我原来的方法）？
啊，就是这样。我编辑了我的 CSS，样式现在也很好。谢谢！

【解决方案2】：

这可以使用 jQuery 完成，但查看标记示例会有所帮助。

这里有一个link，展示了如何使用 ul/li 标签来做到这一点。您应该能够轻松地将其调整为您自己的标记。

通常你会隐藏第 4 项：

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

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

【讨论】：