javascript - 如何修复 Slimmenu 多级子项超出屏幕的问题

Question

我正在为我的网站使用 slimmenu。但不幸的是，如果有嵌套的子元素，子菜单就会从我的桌面屏幕上消失。所以我尝试在它离开屏幕时添加一个带有'ul'的“边缘”类。

这是我使用代码 https://codepen.io/themeix/pen/gyxGNO 的预览截图

但是我的代码不起作用。这是我的 HTML 代码。

<div class="main-menu-area">
   <div class="logo-area">
      <h1>My Logo  </h1>
   </div>
   <div class="menu-warpper">
      <div class="navigation-navbar">
         <ul id="navigation" class="slimmenu">
            <li><a href="#">Main Item</a></li>
            <li><a href="#">Main Item</a></li>
            <li><a href="#">Main Item</a></li>
            <li><a href="#">Main Item</a></li>
            <li>
               <a href="#">Main Item</a>
               <ul>
                  <li>
                     <a href="#">Sub Menu 1</a>
                     <ul>
                        <li>
                           <a href="#">Sub Menu 2</a>
                           <ul>
                              <li>
                                 <a href="#">Sub Menu 3</a>
                                 <ul>
                                    <li>
                                       <a href="#">Sub Menu 4</a>
                                       <ul>
                                          <li>
                                             <a href="#">Sub Menu 5</a>
                                             <ul>
                                                <li><a href="#">Sub Menu 6</a></li>
                                             </ul>
                                          </li>
                                       </ul>
                                    </li>
                                 </ul>
                              </li>
                           </ul>
                        </li>
                     </ul>
                  </li>
                  <li><a href="#">Sub Menu 1</a></li>
               </ul>
            </li>
         </ul>
      </div>
   </div>
</div>

我尝试了以下 js 代码来注入(inject)类边缘，但不幸的是，当子菜单项超出屏幕时，它会为所有 ul 添加。我只想在特定的 ($this) 子菜单项出现时注入(inject)走出屏幕。

jQuery(".slimmenu li").on('mouseenter mouseleave', function(e) {
    if (jQuery('ul', this).length) {
        var elm = jQuery('ul:first', this);
        var off = elm.offset();
        var l = off.left;
        var w = elm.width();
        var docH = jQuery(".navigation-navbar").height();
        var docW = jQuery(".navigation-navbar").width();
        var isEntirelyVisible = (l + w <= docW);
        if (!isEntirelyVisible) {
            jQuery(this).addClass('edge');
        } else {
            jQuery(this).removeClass('edge');
        }
    }
});

在该 js 代码 edge 类中为所有子菜单项添加，但我只想在 mousehove 和它离开屏幕时为当前的 .has-submenu 项注入(inject)它 。当我离开鼠标时，removeclass 也不起作用。谁能帮我用 js 解决这个问题？

Answer 1

删除菜单宽度....导航链接之间的空间有限，这就是发生这种情况的原因。