室内左导航

Question

我正在使用这个包。 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>

Answer 1

如果您使用的是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，请在ng-mouseleave="toggleLeftNav()"标记中使用nav。

参考文件：ngBlur或ng-mouseleave

Answer 2

感谢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');
    });