Question

我正在使用Bootstrap库，当我点击下拉切换类时，这将按预期显示/隐藏下拉列表（因此调用切换的原因）。

如果我点击HTML代码段底部的图片，则会激活javascript代码中的ng-click angular指令。

此代码只是通过检查.dropdown类是否具有“打开”类来检查是否显示下拉菜单。如果没有，那么它将打开在新窗口中传递的网址，否则它将删除“打开”＆＃39;隐藏下拉菜单的类。

我遇到的问题是，如果我尝试点击相同的.dropdown类再次激活下拉列表，它只会在我再点击两次之后出现？

我显然没有采取正确的方法来删除＆＃39;打开＆＃39;班上有谁能建议我做错了什么？如果我没有点击图像（因此没有激活ng-click，这一切都可以正常工作），所以问题与doInteractionBodyEvent（）有关，不知怎的，我不会摧毁＆＃39 ;正确的下拉列表。

// HTML

<div class="dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
   <span class="material-icons">more_vert</span>
</div>

<div>
    <div ng-if="interaction.media[0].image" class="image">
      <a ng-click="doInteractionBodyEvent(interaction.media[0].href)">
        <img ng-src="{{interaction.media[0].image.replace('amp;','')}}" />
      </a>
    </div>
</div>

// Javascript Angular Controller

$scope.doInteractionBodyEvent = function(url) {
    if (angular.element('.dropdown').hasClass('open')) {
        angular.element('.dropdown').removeClass('open');

    } else {
        $window.open(url, '_blank');
    }
}

Answer 1

从HTML

中删除data-toggle =“下拉列表”

<div class="dropdown-toggle" type="button" id="dropdown1"  aria-haspopup="true" aria-expanded="true">
   <span class="material-icons">more_vert</span>
</div>

Angular应用程序中的下拉切换的Bootstrap问题

1 个答案: