时间戳

首页 > 解决方案 > 单击 aria-expanded="false" 不会更改，并且“显示”类也不会添加到引导下拉菜单中 Angular 5

javascript - 单击 aria-expanded="false" 不会更改，并且“显示”类也不会添加到引导下拉菜单中 Angular 5

问题描述

我在我的 Angular 项目中使用引导下拉菜单。但点击时不显示下拉菜单。实际上，单击后，下拉菜单中未添加的显示类，并且 aria-expanded="false" 没有更改为“true”

<div class="dropdown>
 <button class="btn btn-secondary dropdown-toggle f-f-r f-14" type="button" id="dropdown123" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Save Button
<span class="caret"></span>
</button>
 <div class="dropdown-menu f-f-r f-14 p-t-12 p-b-12" aria-labelledby="dropdown123">
  <a class="dropdown-item"

    <button>S1 </button>
  </a>
  <a class="dropdown-item">
    <button>S2 </button>
  </a>
  <a class="dropdown-item">
    <button>S3 </button>
  </a>
</div>
</div>

标签： javascriptangularbootstrap-4

解决方案

我在没有自定义样式类的情况下尝试了您的代码，只添加了一个缺失"的 at<div class="dropdown">和一个缺失>的 at < class="dropdown-item">，它对我有用。

这是缺少内容且没有您的自定义 css 的工作代码。

    <div class="dropdown">
 <button class=" btn btn-secondary
        dropdown-toggle" type="button" id="dropdown123"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Save Button <span class="caret"></span>
        </button>
        <div class="dropdown-menu"
            aria-labelledby="dropdown123">
            <a class="dropdown-item">
                <button>S1</button>
            </a> <a class="dropdown-item">
                <button>S2</button>
            </a> <a class="dropdown-item">
                <button>S3</button>
            </a>
        </div>
    </div>

如果它不起作用，请检查您是否使用的是 Bootstrap 4，也许它与 V3 不同，但我不这么认为，但不确定。

推荐阅读