Javascript 如何在页面中切换每个项目

我有一个隐藏内容的项目列表，悬停时显示/隐藏。我正在尝试使用与我在页面中使用tab相同的功能。目前，我只能一次显示所有隐藏内容

jQuery：

$('#top .item .content').hover(function (e) {
    $(this).children('.black-box').stop().slideToggle(300);
});

$('#top').on('keyup', function (e) {
    var keyCode = e.keyCode || e.which;
    var isTabbing = false;

    if (keyCode == 9) {
        if ($('.featured-content').find('*').is(':focus')) {
            if (!isTabbing) {
                isTabbing = true;
                $('.featured-content .item .content .black-box').stop().slideToggle(300);
            }
        }
    }
});

HTML:

玉米饼
开始吃
披萨
继续吃
OMFG小睡
入睡

我想您应该使用焦点和焦点输出来触发事件

$('#top').on('focus', function(){
    // do something
});

$('#top').on('focusout', function(){
    // do something
});

---

你能再解释一下当你按下“tab”键时你想发生什么吗？当你在一个网站上按tab键时，它会遍历所有的链接，从顶部开始向下移动。当我在第一个

.item

选项卡上单击时，我希望显示

.black box

。当我切换到下一个时，我希望第一个框向下滑动，第二个框向上滑动，等等。这与在站点中切换无关。@不切换非常确定当您在站点中切换时，您的元素获得焦点，然后触发您想要的内容。默认浏览器行为。例如，参考上面的评论。您可以通过链接创建选项卡。当你触发黑匣子时，它会获得焦点。当你聚焦出去时，黑匣子就离开了。不需要按键触发。当在站点中使用Tab键时，实际上是在所有链接（一个接一个）或输入上触发焦点事件

$('#top').on('focus', function(){
    // do something
});

$('#top').on('focusout', function(){
    // do something
});