Question

我刚接受了一些合同工作，其中一部分涉及使用jQuery，我之前从未使用过。这看起来非常简单，但当有人点击菜单外，我无法关闭我们的辅助导航菜单。这是代码：

    $(".products-list li").on("click",function(){// for selected product item

    $('.products-list li').removeClass('active');

    $(this).addClass('active');

});



$("#navigation-menus").on("click",function(){ // for menus close outside click

    $('#navigation-menus').removeClass('open');

    console.log('The function is being called');

    $('.navigation-panel').removeClass('open');

    $('.menus-main-list').removeClass('open');

});





$("#menu-product").hover(function (){

    $('#navigation-menus').addClass('open');

    $('#product-menu-list-2').removeClass('open');

    $('#product-menu-list-1').addClass('open');



});






$("#menu-information").hover(function (){

    $('#navigation-menus').addClass('open');

    $('#product-menu-list-1').removeClass('open');

    $('#product-menu-list-2').addClass('open');

});



$(".menus-main-list").hover(function (){

    $('.menus-main-list').removeClass('open');

    $(this).addClass('open');

});

这是HTML。顺便说一句，我刚来到这里，我没有写任何一个。我的部分工作是清理它。这有点乱。

<nav id="navigation-menus" class="">

<div class="navigation-panel" id="product-menu-list-1">

<ul>

<li class="menus-main-list menus-blue">

  <a href="#">

      <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"><circle cx="30" cy="30" r="29"></circle></svg>

      <span class="test-icon  icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"></span>

      <span class="test-nav-menu-item"></span>

  </a>

  <div class="nm-submenus-list">

     <ul>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

    </ul>

</div>

</li>

<li class="menus-main-list menus-blue">

  <a href="#">

      <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"><circle cx="30" cy="30" r="29"></circle></svg>

      <span class="test-icon  icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"></span>

      <span class="test-nav-menu-item">Services</span>

  </a>

  <div class="nm-submenus-list">

     <ul>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

              <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

    </ul>

</div>

</li>

<li class="menus-main-list menus-blue">

  <a href="#">

      <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"><circle cx="30" cy="30" r="29"></circle></svg>

      <span class="test-icon  icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"></span>

      <span class="test-nav-menu-item">Education</span>

  </a>

  <div class="nm-submenus-list">

     <ul>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

              <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

        <li><a href="x.html"><span class="test-nav-menu-item"></span></a></li>

    </ul>

</div>

</li>

</ul>



</div>



<div class="navigation-panel" id="product-menu-list-2" style="display:none;">

<ul>

<li class="menus-main-list menus-blue">

  <a href="about_us.html">

      <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"><circle cx="30" cy="30" r="29"></circle></svg>

      <span class="test-icon  icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"></span>

      <span class="test-nav-menu-item">About Us</span>

  </a>



</li>

<li class="menus-main-list menus-blue">

  <a href="social_media.html">

      <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"><circle cx="30" cy="30" r="29"></circle></svg>

      <span class="test-icon  icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"></span>

      <span class="test-nav-menu-item">Social Media</span>

  </a>



</li>

<li class="menus-main-list menus-blue">

  <a href="reviews.html">

      <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"><circle cx="30" cy="30" r="29"></circle></svg>

      <span class="test-icon  icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"></span>

      <span class="test-nav-menu-item">Reviews</span>

  </a>



</li>

<li class="menus-main-list menus-blue">

  <a href="community-involvement.html">

      <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 60px; height: 60px; stroke-dasharray: 188.531, 183;" focusable="false"><circle cx="30" cy="30" r="29"></circle></svg>

      <span class="test-icon  icon-vehicle" style="width: 60px; height: 60px; line-height: 60px; font-size: 30px;"></span>

      <span class="test-nav-menu-item">Community Involvement</span>

  </a>



</li>

</ul>



</div>

我真的很感激任何帮助。

Answer 1

在菜单中添加标签索引可让您访问当您单击菜单旁边时将触发的focus和focusout个事件。然后，当菜单失去焦点以关闭它时，您可以触发一个功能。

负值（通常tabindex =“ - 1”表示该元素应该是可聚焦的，但不应通过顺序键盘导航访问。对于使用JavaScript创建可访问的小部件非常有用。

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

https://developer.mozilla.org/en-US/docs/Web/Events/focusout

使用jQuery关闭辅助导航菜单

1 个答案: