鏈接上的onfocus事件

-1

我正在構建一個由CSS驅動的菜單，並且遇到了鍵盤用戶遇到的問題。對於CSS :focus選擇器沒有跨瀏覽器支持，所以我正在嘗試構建一個將執行相同操作的jQuery腳本。鏈接上的onfocus事件

HTML菜單：

<div id="nav"> 
    <ul> 
     <li><a href="/index.asp" tabindex="12">Home</a></li> 
     <li><a href="/aboutus.asp" tabindex="13">About Us</a></li> 
     <li><a href="/whatWeDo.asp" tabindex="14" id="whatWeDo">What We Do</a> 
     <ul> 
      <li><a href="/whatWeDo1.asp">What we do1</a></li> 
      <li><a href="/whatWeDo2.asp">What we do2</a></li> 
     </ul> 
     </li> 
     <li><a href="/testStudies.asp">Test Studies</a></li> 
    </ul> 
</div>

菜單CSS規則：

#nav ul { 
    padding: 0; margin: 0; 
} 
#nav ul li { 
    list-style: none; 
    font-size: 16px; 
} 
#nav ul li ul li { 
    font-size: 13px; 
} 
#nav ul li ul { 
    display: none; 
} 

.showMenu, #nav ul li:hover ul{width:200px; padding:7px; background: #F2F2F2; border:1px solid #F2F2F2; display: block; position: absolute; left: 85px; top: 30px; }

這裏是我試圖讓jQuery代碼的工作：

$(document).ready(function(){ 
    $('#whatWeDo').focus(function() { 
     $(#nav ul li ul).addClass("showMenu"); 
    }); 
});

來源

2011-12-30 user1122811

那麼你面對的代碼是什麼問題？ – Kishore 2011-12-30 11:20:23

嘗試在第三個選擇符周圍添加引號，例如'#nav ul li ul'。 – Sam152 2011-12-30 11:20:39

請記住您的選擇器在報價中！ '$（「＃nav ul li ul」）。ad ...' – 2011-12-30 11:20:49

你忘記了報價：

$(document).ready(function(){ 
    $('#whatWeDo').focus(function() { 
           $('#nav ul li ul').addClass("showMenu"); 
      }); 
 });

來源

2011-12-30 11:24:46 JohnJohnGa

我已經添加了引號，但仍然沒有快樂 – user1122811 2011-12-30 12:23:05

你已經忘記了報價，jQuery的應該是：

$(document).ready(function(){ 
    $('#whatWeDo').focus(function() { 
     $('#nav ul li ul').addClass("showMenu"); 
    });

來源

2011-12-30 11:48:54

我加入它們仍然沒有快樂 – user1122811 2011-12-30 12:28:55

像在其他的答案提到的，你的內心與選擇報價應該做的伎倆周圍。

雖然我想進一步指出，建議使用在jQuery 1.7中添加的on()函數來綁定事件。這裏是你的代碼是什麼樣子使用on()：

$(document).ready(function(){ 
    $("#whatWeDo").on("focus", function() { 
     $("#nav ul li ul").addClass("showMenu"); 
    }); 
});

Here更多信息關於on()。

來源

2011-12-30 12:09:46 Purag

我試過上面的代碼，它仍然無法正常工作。當您將鼠標懸停在鏈接上時，嵌套列表會作爲子菜單飛出。我試圖在jQuery中提供一個功能，使鍵盤用戶具有相同的效果。 – user1122811 2011-12-30 12:25:38

你使用的是什麼版本的jQuery？ – Purag 2011-12-30 12:26:20

jquery-1.2.6.min.js – user1122811 2011-12-30 12:27:45

鏈接上的onfocus事件

回答

相關問題