Question

在我的React网站上，我有一个个人资料/帐户下拉列表（类似于Github，您点击个人资料图片并显示一个下拉菜单）。在大多数浏览器上，它可以正常工作单击div后，它会将dropdown--active类应用于自身。此dropdown--active类包含子元素dropdown__content的规则，可将其display从none更改为block，从而切换下拉内容的显示点击。

点击之前：

<div class="dropdown account-dropdown">
  <a href="/#" class="dropdown__trigger ">
    <span class="account-dropdown--name">admin</span>
  </a>
  <div class="dropdown__content">
    <div class="account-dropdown--identity account-dropdown--segment">
      Signed in as admin
    </div>
  </div>
</div>

点击后：

<div class="dropdown dropdown--active account-dropdown">
  <a href="/#" class="dropdown__trigger ">
    <span class="account-dropdown--name">admin</span>
  </a>
  <div class="dropdown__content">
    <div class="account-dropdown--identity account-dropdown--segment">
      Signed in as admin
    </div>
  </div>
</div>

但是，我可以让它在Microsoft Edge中显示的唯一方法是点击屏幕上的其他位置之后我已经点击了父元素。打开Inspect Element后，我可以看出该类实际上是在点击后立即应用的，但是在点击屏幕上的其他位置之前，不会重新绘制/重新评估子元素。或者，选中元素并单击＆＃34;输入＆＃34;不会导致这个问题。

适用于Chrome，IE 11，Firefox。但

Microsoft Edge不会在课程更改后立即重新绘制元素

0 个答案: