Question

我有一个名为header-main.js的Ember.js组件，其模板为header-main.hbs。在Handlebars文件中，我有这样的东西：

<ul id="header-nav">
  <li class="unopened">
    <a href="javascript:void(0);">Brand</a>
    <ul class="dropdown">
      <li><a href="javascript:void(0);">Lenovo</a></li>
      <li><a href="javascript:void(0);">Dell</a></li>
      <li><a href="javascript:void(0);">HP</a></li>
    </ul>
  </li>
</ul>

在组件的didInsertElement钩子中，我有一些jQuery改变了<li>标签的类，以显示如下的下拉菜单：

didInsertElement: function() {
    this.$('#header-nav li > a').click(function() {
    var currentState = $(this).parent().attr('class');

    if (class === 'unopened') {
        $(this).parent().attr('class', 'open');
    } else {
        $(this).parent().attr('class', 'unopened');
    }
  });
}

这一切都很有效，除了它强制用户只需点击按钮来切换下拉菜单，这与大多数只允许您点击窗口中的任意位置以关闭下拉列表的网站不同。确保通过单击窗口中的任何位置可以关闭此组件中的下拉列表的正确方法是什么？我也面临着与模态窗口相似的情况。

Answer 1

使用JQuery focusout（）来定义结束操作。因此，只要组件失去焦点，即外面有一个点击，它就应该关闭。

在Ember组件外听取点击的正确方法是什么？

1 个答案: