添加类()不工作
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>
我有一个 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>