我的任务是制作类似的导航辅助功能标签，以便在索尼网站上看到：http://www.sony.co.uk/pro/hub/home
我感兴趣的是当你将鼠标悬停在“产品”上时，你会发现菜单中的第一个图像周围有一条细线。从这里，如果您使用键盘上的Tab键，则可以选择菜单选项。然后，如果您将其悬停在另一个主菜单项上，则虚线将显示在该菜单中的第一个图像上。
下面的代码是我试图实现这种效果的方式，这看起来与索尼的做法类似，因为我查看了他们的jquery-main.js文件，但是头脑不起作用。
这是我的代码（首先是标记）尝试做同样的事情。
<div class="main-navigation@(Request.QueryString.Get("breadcrumb") != "1" ? "" : " type-2")">
<ul class="cf">
<li class="mmnu"><a href="javascript:;">Products</a></li>
<li class="mmnu"><a href="javascript:;">Your Business</a></li>
<li class="mmnu"><a href="javascript:;">Where To Buy</a></li>
<li class="mmnu"><a href="javascript:;">Support</a> </li>
<li class="mmnu"><a href="javascript:;">Contact Us</a></li>
<li class="mmnu"><a href="javascript:;">Partners</a></li>
</ul>
<div class="expand-SD@(Request.QueryString.Get("breadcrumb") != "1" ? " type-2" : "")">
<div class="category-navigation-SD SD-m1"><!-- PRODUCTS -->
<div class="row-separator-SD cf">
<div class="col-1x4 frst">
<a href="#"><img width="50" height="24" width="50" height="24" src="assets/images/content/_0049_channel_partners.svg" alt="Category Thumbnail" /></a>
<h2><a href="#">Broadcast & Pro A/V</a></h2>
<ul>
<li><a id="ezone" onclick="s_objectID='topdropdown:Digital Signage';try{sc_navMethod('topdropdown');}catch(err){}" href="Iframe_Page?url=popup_my_subscriptions.cshtml&iW=921&iH=810" class="fancybox.iframe">New iframe</a></li>
<li><a href="">HD & SD Camcorders</a></li>
<li><a href="">Camera Systems</a></li>
<li><a href="">HD Decks, Recorders & VTRs</a></li>
<li><a href="">Professional Media</a></li>
<li><a href="">Production Switchers & Image Processing</a></li>
<li><a href="">Production Monitors</a></li>
<li><a href="">Professional Audio</a></li>
</ul>
<a href="#" class="more">More ></a>
</div>
<div class="col-1x4">
<a href="#"><img width="50" height="24" src="assets/images/content/_0050_prime_support.svg" alt="Category Thumbnail" /></a>
<h2><a href="#">Broadcast Solutions</a></h2>
<ul>
<li><a href="">Outside Broadcast</a></li>
<li><a href="">News Aquisition & Production</a></li>
<li><a href="">Studios</a></li>
<li><a href="">Content Management & Distribution</a></li>
</ul>
<a href="#" class="more">More ></a>
</div>
<div class="col-1x4">
<a href="#"><img width="50" height="24" src="assets/images/content/_0047_projector.svg" alt="Category Thumbnail" /></a>
<h2><a href="#">4K Digital Cinema</a></h2>
<ul>
<li><a href="">4K Digital Cinema Projectors</a></li>
<li><a href="">High Frame Rate Software</a></li>
<li><a href="">Theatre Management Solutions</a></li>
<li><a href="">Entertainment Access Glasses</a></li>
<li><a href="">Accessories</a></li>
</ul>
<a href="#" class="more">More ></a>
</div>
<div class="col-1x4 lst">
<a href="#"><img width="50" height="24" src="assets/images/content/_0048_sales_enquiries_2.svg" alt="Category Thumbnail" /></a>
<h2><a href="#">Video Security</a></h2>
<ul>
<li><a href="">Cameras</a></li>
<li><a href="">Recorders</a></li>
<li><a href="">Monitoring Software</a></li>
<li><a href="">Digital Encoders</a></li>
<li><a href="">Video Security Monitors</a></li>
<li><a href="">Accessories</a></li>
</ul>
<a href="#" class="more">More ></a>
</div>
</div><!-- ROW SEPARATOR END -->
<div class="row-separator-SD cf">
<div class="col-1x4 frst">
<a href="#"><img width="50" height="24" src="assets/images/content/_0024_medical.svg" alt="Category Thumbnail" /></a>
<h2><a href="#">Medical</a></h2>
<ul>
<li><a href="">3D Medical Products</a></li>
<li><a href="">Radiology Imagers</a></li>
<li><a href="">Printers</a></li>
<li><a href="">Print Media</a></li>
<li><a href="">Monitors</a></li>
</ul>
<a href="#" class="more">More ></a>
</div>
<div class="col-1x4">
<a href="#"><img width="50" height="24" src="assets/images/content/_0025_video_conferencing.svg" alt="Category Thumbnail" /></a>
<h2><a href="#">Video Conferencing</a></h2>
<ul>
<li><a href="">tbc</a></li>
<li><a href="">tbc</a></li>
<li><a href="">tbc</a></li>
</ul>
<a href="#" class="more">More ></a>
</div>
<div class="col-1x4 lst">
<a href="#"><img width="50" height="24" src="assets/images/content/_0028_semi_conductors.svg" alt="Category Thumbnail" /></a>
<h2><a href="#">Semiconductors</a></h2>
<ul>
<li><a href="">Technical Library Login</a></li>
<li><a href="">Technical Library Registration</a></li>
</ul>
<a href="#" class="more">More ></a>
</div>
</div><!-- ROW SEPARATOR END -->
<div class="SD-nsh">
<a href="#" class="SD-cls"><img width="80" height="40" src="assets/images/content/menu_close.svg" alt="Menu close image" /></a>
</div>
</div><!-- PRODUCTS END -->
的jQuery
$('.main-navigation ul li.mmnu').click(function(){
var tabNum = $(this).index();
if (!allClosedSD())
{
animateToSizeSD(tabNum);
fadeInCurrentSD(tabNum);
// code below I though would focus on the first link in the menu
$('.SD-m1 div ul li:first a').focus();
console.log(tabNum);
console.log('enter activated');
}
else
{
if ($('.main-navigation ul li:eq(' + tabNum + ')').hasClass('hover'))
{
console.log('this one closes it');
closeMnuSD();
} else {
fadeInCurrentSD(tabNum);
animateToSizeSD(tabNum);
console.log('live swtich activated');
}
}
$('.main-navigation').addClass('open');
});
编辑：包含animateToSizeSD（）代码。
function animateToSizeSD(tabNum){
if (tabNum == "0" && !allClosedSD()) {
$('.expand-SD').show().animate({height:SDHarr[0]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(0)').addClass('hover');
} else if (tabNum == "0")
{
$('.expand-SD').delay(400).show().animate({height:SDHarr[0]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(0)').addClass('hover');
}
if (tabNum == "1" && !allClosedSD()) {
$('.expand-SD').show().animate({height:SDHarr[1]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(1)').addClass('hover');
} else if (tabNum == "1")
{
$('.expand-SD').delay(400).show().animate({height:SDHarr[1]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(1)').addClass('hover');
}
if (tabNum == "2" && !allClosedSD()) {
$('.expand-SD').show().animate({height:SDHarr[2]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(2)').addClass('hover');
} else if (tabNum == "2")
{
$('.expand-SD').delay(400).show().animate({height:SDHarr[2]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(2)').addClass('hover');
}
if (tabNum == "3" && !allClosedSD()) {
$('.expand-SD').show().animate({height:SDHarr[3]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(3)').addClass('hover');
} else if (tabNum == "3")
{
$('.expand-SD').delay(400).show().animate({height:SDHarr[3]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(3)').addClass('hover');
}
if (tabNum == "4" && !allClosedSD()) {
$('.expand-SD').show().animate({height:SDHarr[4]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(4)').addClass('hover');
} else if (tabNum == "4")
{
$('.expand-SD').delay(400).show().animate({height:SDHarr[4]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(4)').addClass('hover');
}
if (tabNum == "5" && !allClosedSD()) {
$('.expand-SD').show().animate({height:SDHarr[5]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(5)').addClass('hover');
} else if (tabNum == "5")
{
$('.expand-SD').delay(400).show().animate({height:SDHarr[5]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(5)').addClass('hover');
}
};
答案 0 :(得分：1)
为了显示一些正确的格式，我将使用答案。我试图建议将焦点调用移动到这样的动画函数：
$('.expand-SD').show().animate({
height: SDHarr[0]
}, 'slow', function () {
$('.SD-m1 div ul li:first a').focus();
});
这样，在动画结束后执行焦点。