javascript - 如何在我通过页面切换时切换每个元素

Question

我有一个包含隐藏内容的元素列表，这些内容在悬停时显示/隐藏。我正在尝试让相同的功能与我在页面中切换时使用的功能相同。目前，我只能让所有隐藏的内容同时出现。

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
});