如何在选项卡浏览页面时切换每个项目

Question

我有一个带有隐藏内容的项目列表，可以在悬停时显示/隐藏。我正在尝试获得相同的功能，因为我在我的页面上使用tab键。目前，我只能让所有隐藏的内容同时出现。

Here's a live example of my code

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：

<div id="top" class="featured-content">
  <div class="item">
      <h3>Tacos</h3>
      <div class="content">
          <img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="" class="image" />
          <div class="black-box">
              <div class="background"></div>
              <a href="#">I love tacos!</a>
          </div>
      </div>
      <div class="start-btn">Start Eating</div>
  </div>
  <div class="item">
      <h3>Pizza</h3>
      <div class="content">
          <img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="" class="image" />
          <div class="black-box">
              <div class="background"></div>
              <a href="#">And Pizzzzzzaaa! P-I-Z-Z-A!</a>
          </div>
      </div>
      <div class="start-btn">Keep Eating</div>
  </div>
  <div class="item">
      <h3>OMFG Naps</h3>
      <div class="content">
          <img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="" class="image" />
          <div class="black-box">
              <div class="background"></div>
              <a href="#">Because you just ate a ton of food! #foodcoma</a>
          </div>
      </div>
      <div class="start-btn">Go to sleep</div>
  </div>
</div>

Answer 1

我认为你想使用focus和focus out来触发事件。

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

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