内部左侧导航答案

【问题标题】：Interior Left Nav内部左侧导航
【发布时间】：2017-10-03 02:33:27
【问题描述】：

我正在使用这个包。 http://carbondesignsystem.com/components/interior-left-nav/code

您有解决此问题的想法吗？我希望“导航”在模糊事件时关闭。

我的问题如下。

我的代码。

<nav role="navigation" aria-label="Interior Left Navigation" data-interior-left-nav class="bx--interior-left-nav bx--interior-left-nav--collapseable">
  <ul role="menubar" class="left-nav-list" data-interior-left-nav-list aria-hidden="false">
    <li role="menuitem" tabindex="0" class="left-nav-list__item" data-interior-left-nav-item>
      <a class="left-nav-list__item-link">
        Example Item 1
      </a>
    </li>
  </ul>
  <div class="bx--interior-left-nav-collapse" data-interior-left-nav-collapse>
    <a class="bx--interior-left-nav-collapse__link" href="#">
      <svg class="bx--interior-left-nav-collapse__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
        <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
      </svg>
    </a>
  </div>
</nav>

【问题讨论】：

你在用jquery吗？
是的。我正在使用 jQuery 和 angularJS

标签： javascript jquery html css angularjs

【解决方案1】：

感谢 Shiladitya 的建议，我找到了解决方案。我将“mouseleave”事件连接到“click”关闭图标事件并工作。

    $('nav[role="navigation"]').mouseleave(function(){ 
    var a = document.getElementById("closeHamburgerMenu");
    function triggerEvent(element, event) {
           if (document.createEvent) {
               // not IE
               var evt = document.createEvent("HTMLEvents");
               evt.initEvent(event, true, true ); // event type, bubbling, cancelable
               return element.dispatchEvent(evt);
           } else {
               // IE
               var evt = document.createEventObject();
               return element.fireEvent("on"+event, evt)
           }
        }
    triggerEvent(a, 'click');
    });

【讨论】：

【解决方案2】：

如果你使用jQuery，你可以使用jQuery mouseout、blur或mouseleave方法。

$('nav[role="navigation"]').mouseleave(function(){ 
  // call toggleLeftNav() method
  //toggleLeftNav();
  $('.bx--interior-left-nav-collapse').click();
});

参考文档：

jQuery mouseout
jQuery mouseleave
jQuery blur

希望这会对你有所帮助。

如果您使用的是angularJS，则在nav 标记中使用ng-mouseleave="toggleLeftNav()"。

参考文档：ngBlur 或ng-mouseleave

【讨论】：

事件被触发但下面的消息显示Uncaught ReferenceError: toggleLeftNav is not defined
@KyogoMochida 您需要在nav 标签中使用ng-mouseleave="toggleLeftNav()"。 参考文档： docs.angularjs.org/api/ng/directive/ngMouseleave
> 你需要使用 ng-mouseleave="toggleLeftNav()".... @Shiladitya 谢谢，但同样的错误再次
@KyogoMochida 我已经更新了 jQuery 答案，看看。我正在尝试触发鼠标离开的点击。