jquery - 使用 HTML5 或 jQuery 增加项目符号？

Question

我的 HTML 知识很少，所以这可能是一个非常微不足道的问题。如果有任何帮助，我将不胜感激!

当我使用 LaTeX beamer 类创建演示文稿时，有一个非常有用的命令:

\begin{itemize} 
\item<x-> Alpha
\item<x-> Beta
\item<x-> Gamma  
\end{itemize}

这会创建三个项目符号点，它们会在鼠标单击或向前/向后箭头后逐渐出现，例如在 Powerpoint 中。

我想在 .html 文件中为非常长的列表(可能超过 50 个项目)提供相同的功能。所以它真的不能在幻灯片环境中工作，而只能通过向下滚动在浏览器中工作。

是否有一种简单的方法可以使用 HTMl5 或 jQuery 或其他方式实现此目的？谷歌搜索抛出了数以千计的演示工具，我真的不知道从哪里开始。

Answer 1

使用 jQuery，您可以将 keypress 事件绑定(bind)到窗口，并在每次按下键时显示下一个列表项:

var curIndex = 0;
$(window).keypress(function() {
   $("li").eq(curIndex).show();
   curIndex++;
});

为了仅使用箭头键使其工作，需要稍作更改(您需要使用 keydown 而不是 keypress):

var curIndex = 0;
$(window).keydown(function(e) {
    if(e.keyCode === 37) {
        if(curIndex > 0) curIndex--;
        $("li").eq(curIndex).hide();
    }
    else if(e.keyCode === 39) {
        $("li").eq(curIndex).show();
        if(curIndex < 3) curIndex++; 
    }
});

您的 HTML 列表将如下所示:

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

默认情况下需要隐藏列表项，在您的 CSS 中使用类似 li { display:none } 的东西。

另请注意，上面的示例并未处理显示最后一个元素的情况 - 在这种情况下您打算发生什么？

这是一个 example fiddle显示此操作(您需要单击“结果”框架为其提供焦点，然后按任意键触发事件处理程序)。