Javascript 带有引导下拉菜单的ember cli应用程序在释放鼠标时立即关闭

我最近才开始使用余烬，我想包括引导。我通过bower添加了引导：

bower安装--save bootstrap

，然后将以下内容添加到我的ember-cli-build.js文件中：

app.import('bower_components/bootstrap/dist/css/bootstrap.css');
app.import('bower_components/bootstrap/dist/js/bootstrap.js');

看起来一切正常，但当我添加了一个下拉菜单时，单击菜单会按预期展开，但在释放鼠标时会立即关闭-即，单击一次看起来什么都没有发生，但如果单击并按住，菜单会出现，然后在释放按钮时消失。如果我使用tab键对菜单进行tab，然后按下向下箭头，则也会出现下拉菜单。我怀疑这与jquery有关，因为调试器跳转到jquery.js中，在那里的某个地方，菜单关闭了，但我还不够精通，无法弄清楚到底发生了什么

这是我的bower.json文件：

{
  "name": "ember-mm-phone-app",
  "dependencies": {
    "ember": "1.13.3",
    "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
    "ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
    "ember-data": "1.13.5",
    "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.5",
    "ember-qunit": "0.4.1",
    "ember-qunit-notifications": "0.0.7",
    "ember-resolver": "~0.1.18",
    "jquery": "^1.11.1",
    "loader.js": "ember-cli/loader.js#3.2.0",
    "qunit": "~1.17.1",
    "ember-simple-auth": "0.8.0",
    "bootstrap": "~3.3.5"
  },
  "devDependencies": {
    "ember-localstorage-adapter": "0.5.4"
  }
}

这是下拉菜单：

<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Account <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li>{{link-to 'Profile' 'user'}}</li>
            <li>{{link-to 'Settings' 'application'}}</li>
            <li>{{link-to 'Terms and Conditions' 'application'}}</li>
            <li class="divider"></li>
            <li>
              <a {{ action 'invalidateSession' }}>Logout</a>
            </li>
          </ul>
        </li>

{{链接到“配置文件”“用户”}
{{链接到“设置”“应用程序”}
{{链接到“条款和条件”应用程序}


注销

如果您阅读了，它会说Javascript将

open

类添加到元素中。问题是，Ember希望管理DOM本身，而不希望任何第三方库这样做。因此，当引导程序向DOM添加一个类时，它很可能在下次Ember更新DOM时被覆盖

根据您的用例，有一些潜在的解决方案。您可以将下拉列表包装到组件中，但这可能有些过分。最简单的方法是使用Ember的click事件，而不是调用

$（element）.dropdown（）

这将为您添加和删除

open

类，从而避免使用引导Javascript插件。如果这还不能覆盖所有的基础，那么您可能需要考虑将下拉列表包装成一个文件。不过，封装在组件中需要更多的工作。也有一些余烬引导项目，但我不知道他们的工作情况如何

---

短篇故事：它不适用于您，因为Ember正在覆盖Bootstrap对DOM所做的更改。您需要一种方法来整合这两者。

由于我今天早上进行了其他bower安装，所以肯定发生了其他事情，因为我的机器在发布此问题大约一小时后逐渐停止运行。我不得不重新启动，然后下拉菜单神奇地开始工作！非常令人沮丧的是，你花了几个小时处理一个问题，并通过重新启动解决了它。

谢谢，这无疑为我提出的其他一些问题指明了正确的方向，但不幸的是，这并不是针对这个特定问题。我今天早上做的其他bower安装一定发生了其他事情，因为我的机器在发布这个问题大约一小时后逐渐停了下来。我不得不重新启动，然后下拉菜单神奇地开始工作！当你花几个小时在一个问题上，并通过重启来解决它时，你会感到非常沮丧。再次感谢你的见解。我想说的是，即使这不是你现在的问题，它肯定会成为未来的问题。我不会说您必须更改任何代码，但请注意潜在的问题，这样您就知道如果发生问题，应该查找什么。它修复了我类似的问题。

<li class="dropdown {{if dropdownOpen 'open'}}">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" {{action 'toggleDropdown'}}>
    Account <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    <li>{{link-to 'Profile' 'user'}}</li>
    <li>{{link-to 'Settings' 'application'}}</li>
    <li>{{link-to 'Terms and Conditions' 'application'}}</li>
    <li class="divider"></li>
    <li>
      <a {{ action 'invalidateSession' }}>Logout</a>
    </li>
  </ul>
</li>

dropdownOpen: false,

actions: {
    toggleDropdown() {
        this.toggleProperty('dropdownOpen');
    }
}