Question

我正在尝试使我的导航更易于访问，也就是说，它应该与tab键一起使用。这个想法是内部div的所有东西都隐藏在页面加载上，并且在悬停或聚焦于任何Test锚点时，应该出现相应的div。

我能够在没有jquery的情况下使用悬停工作，即只使用CSS。但是，我无法做同样的重点。

所以我决定写一些jquery，但我很明白。任何帮助将不胜感激。

<div class="nav">
    <ul>
        <li>
            <span><a href="">Test 1</a></span>
            <div>
                <ul>
                    <li><a href="">Link 1</a></li> 
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                </ul>
            </div>
        </li>
        <li>
            <span><a href="">Test 2</a></span>
            <div>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                </ul>
            </div>
        </li>
        <li>
            <span><a href="">Test 3</a></span>
            <div>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                </ul>
            </div>
        </li>
    </ul>
</div>


.nav ul li {float: left;}
.nav ul li div {position:absolute; left: -999px;}


$('.nav ul li span a').focus(function(){
    $('.nav ul li div').css({'left': '0'});
}).focusout();

Answer 1

以下作品：

<style>
.nav ul li {float: left;}
.nav ul li div {position:absolute; display:none;}
</style>
<script>
$(document).ready(function() {
   $('.nav ul li span a').on("focus mouseenter", function(){
      $(".nav div").hide();
      $(this).parent().siblings("div").show();
   });

   $(".nav ul li").on("mouseleave", function(){
      $("div",this).hide();
   });
});
</script>

演示：http://jsfiddle.net/nnnnnn/ArU6j/

首先，使用display:none而不是left: -999px，否则使用Tab键可以在屏幕边缘标记“隐身”字段。

然后，当鼠标移动到其中一个顶级锚点元素上，或者其中一个获得焦点时，我们隐藏任何以前可见的子菜单，并显示适用于当前锚点的子菜单。

当锚点失去焦点时，我们不隐藏子菜单，因为那时您无法选项卡到子菜单中的项目。

最后，当鼠标从父li元素移开时，我们隐藏其子菜单 - 我们不会在顶级锚点的mouseleave上执行此操作，因为之后您无法将鼠标移到子菜单中它消失了。

（上面至少有一个小问题，但它应该让你开始。）

使用鼠标悬停使导航行为相同

1 个答案: