Question

我有一个引导按钮

<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 按钮时，Chrome开发人员工具中的“dropup mobilewidth mobilebottom”会亮起，好像有什么变化，但是'打开了'类未添加。我做错了什么？

Answer 1

这显然是该课程的补充问题＆amp;它已被移除。

可能bootstrap会在focus事件上观看，切换 open课程。如果你的处理程序在bootstrap之前：

您：open已添加
bootstrap：open已切换

- ＆GT;结果：没有任何改变

在另一种情况下，该类会被添加，但是看一下你的描述，Chrome开发者工具会闪现某些东西改变了它，而不是双重改变open类的问题

Answer 2

不确定，如果按钮在页面上，它似乎对我有效。这会在单击按钮后警告class属性：

＆＃13;

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

＆＃13;

<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>

＆＃13;

addClass（）不起作用

2 个答案: