欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

在subnav模式中查找最后一個(gè)可聚焦的鏈接

CSS

我們有四個(gè)主菜單項(xiàng)(襯衫、褲子、鞋子、帽子)，當(dāng)你點(diǎn)擊它們時(shí)，每個(gè)菜單項(xiàng)都有一個(gè)子導(dǎo)航菜單。例如，當(dāng)點(diǎn)擊襯衫時(shí)，一個(gè)菜單打開(kāi)，有更多的選項(xiàng)(ABC品牌到Z品牌)。

主導(dǎo)航類(lèi)是。維護(hù)導(dǎo)航

子導(dǎo)航類(lèi)是。subNav

當(dāng)用戶通過(guò)subNav并到達(dá)末尾時(shí)，我們希望用戶被帶到下一個(gè)mainNav項(xiàng)。例如，當(dāng)用戶落在襯衫上時(shí)& gtz品牌，然后再次點(diǎn)擊tab，我們希望襯衫的subNav關(guān)閉，用戶被帶到褲子。

我如何在subNav中找到最后一個(gè)可聚焦的項(xiàng)目，這樣當(dāng)選項(xiàng)卡被單擊時(shí)，這個(gè)功能就會(huì)發(fā)生？

<div class="mainNav">
  <a="#">Shirts</a>
  <a="#">Pants</a>
  <a="#">Footwear</a>
  <a="#">Headgear</a>
</div>

<div class="subNav-0">
  <h1>Shirts</h1>
  <a="#">ABC Brand</a>
  <a="#">Guess</a>
  <a="#">Levis</a>
  <a="#">Z Brand</a>
</div>

<div class="subNav-1">
  <h1>Pants</h1>
  <a="#">ABC Brand</a>
  <a="#">Guess</a>
  <a="#">Levis</a>
  <a="#">Z Brand</a>
</div>

<div class="subNav-2">
  <h1>Headgear</h1>
  <a="#">Big Caps</a>
  <a="#">Levis</a>
  <a="#">Pacific Hatwear</a>
  <a="#">Polo</a>
  <a="#">Stetson</a>
</div>

<div class="subNav-3">
  <h1>Footwear</h1>
  <a="#">Adidas</a>
  <a="#">Asics</a>
  <a="#">Brooks</a>
  <a="#">Converse</a>
  <a="#">New Balance</a>
  <a="#">Nike</a>
  <a="#">Puma</a>
  <a="#">Saucony</a>
</div>

評(píng)論區(qū)已經(jīng)滿了，所以我想在這里發(fā)布一些代碼。OP中發(fā)布的示例代碼并沒(méi)有在每個(gè)主導(dǎo)航元素之后直接包含每個(gè)subnav，所以瀏覽器不會(huì)正確處理跳轉(zhuǎn)順序。

如果代碼改為這樣，會(huì)有所幫助:

<div class="mainNav">
  <a="#">Shirts</a>
    <div class="subNav-0">
      <h1>Shirts</h1>
      <a="#">ABC Brand</a>
      <a="#">Guess</a>
      <a="#">Levis</a>
      <a="#">Z Brand</a>
    </div>
  <a="#">Pants</a>
    <div class="subNav-1">
      <h1>Pants</h1>
      <a="#">ABC Brand</a>
      <a="#">Guess</a>
      <a="#">Levis</a>
      <a="#">Z Brand</a>
    </div>
  <a="#">Footwear</a>
    <div class="subNav-3">
      <h1>Footwear</h1>
      <a="#">Adidas</a>
      <a="#">Asics</a>
      <a="#">Brooks</a>
    </div>
</div>

每個(gè)子導(dǎo)航都應(yīng)該顯示:none，直到選擇主導(dǎo)航打開(kāi)它。當(dāng)它顯示:none時(shí)，它不在tab鍵順序中。當(dāng)它有display:block時(shí)，它會(huì)被瀏覽器插入到tab鍵順序中，而無(wú)需你做任何事情。

還有其他在OP中沒(méi)有提到的可訪問(wèn)性考慮，比如每個(gè)主導(dǎo)航元素都應(yīng)該有aria-expanded，這樣屏幕閱讀器就會(huì)知道它是一個(gè)可以打開(kāi)的折疊部分。