addClass() не работает

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, то «dropup mobilewidth mobilebottom» загорается инструмент разработчика Chrome, как будто что-то изменилось, но ' open ' класс не добавлен. Что я делаю не так?

Answer 1

Очевидно, что класс добавлен & удаляется.

Возможно, часы для ботстрапа на focus событиях и переключателиopen класс. Если ваш обработчик находится перед начальной загрузки:

• вы: open добавил

• самозагрузки: open переключен

-> результат: ничего не меняется

В другом случае класс будет добавлен, но, глядя на ваше описание, которое Chrome Dev Tools начинает мигать, что-то изменилось скорее вопрос двойного изменения open класс

Answer 2

Не уверен, что это работает для меня, если кнопка находится на странице. Это предупреждает атрибут класса после нажатия на кнопку:

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>