添加类()不工作

addClass() not working

我有一个 bootstrap 按钮

<button onclick="leaveOpen()">TEST</button>

它调用自定义函数

function leaveOpen(){
  $("#rangeDropdown").addClass('open');
  $("#dropdownMenu2").trigger('focus').attr('aria-expanded', 'true');
}(jQuery);

哪些会影响这些元素

<div class="dropup mobilewidth mobilebottom" id="rangeDropdown">
  <button class="btn btn-default dropdown-toggle mobilewidth" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   ...
  </button>
...
</div>

这部分有效

$("#dropdownMenu2").trigger('focus').attr('aria-expanded', 'true');

但这部分没有

$("#rangeDropdown").addClass('open');

当我单击 TEST 按钮时,"dropup mobilewidth mobilebottom" 在 chrome 开发人员工具中亮起好像发生了一些变化,但是没有添加 'open' class。我做错了什么?

添加和删除 class 显然是问题所在。

可能 bootstrap 观看 focus 事件并 切换 open class。 如果您的处理程序在 bootstrap 之前:

  • 你:open 已添加

  • bootstrap:open 已切换

-> 结果:没有任何变化

在另一种情况下,将添加 class,但查看您的描述 Chrome Dev Tools 闪烁显示某些内容已更改,而是双重更改 open class

不确定,如果按钮在页面上,它似乎对我有用。这会在单击按钮后提醒 class 属性:

function leaveOpen(){
  
  $("#rangeDropdown").addClass('open');
  
  alert($("#rangeDropdown").attr('class'));
  
  $("#dropdownMenu2").trigger('focus').attr('aria-expanded', 'true');
  
}(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropup mobilewidth mobilebottom" id="rangeDropdown">
  <button class="btn btn-default dropdown-toggle mobilewidth" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   ...
  </button>
...
</div>
    
<button onclick="leaveOpen()">TEST</button>