我有一个包含隐藏内容的元素列表,这些内容在悬停时显示/隐藏。我正在尝试让相同的功能与我在页面中切换时使用的功能相同。目前,我只能让所有隐藏的内容同时出现。
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>
最佳答案
我认为您想使用 focus 和 focus out 来触发您的事件。
$('#top').on('focus', function(){
// do something
});
$('#top').on('focusout', function(){
// do something
});
关于javascript - 如何在我通过页面切换时切换每个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29187810/