Twitter Bootstrap скрыть класс css и jQuery

Я использую класс hide css, чтобы скрыть кнопку при загрузке страницы.

Проблема в том, что когда я пытаюсь показать кнопку, которую я ранее скрывал с помощью jQuery, кнопка меньше.

(то же самое не происходит, когда я использую jQuery для скрыть, а затем покажу кнопку)

Спасибо за помощь.

Изменить: скрыть класс:

.hide {
    display: none;
}

Моя кнопка:

<a class="btn hide" id="buttonEditComment" href="javascript:void()"><i class="icon-comment"></i> Edit comment</a>

Javascript, который я использую, чтобы показать кнопку:

$("#buttonEditComment").toggle();

Ответы

Ответ 1

Как dfsq сказал, что мне просто нужно было использовать removeClass("hide") вместо toggle()

Ответ 2

Если у элемента есть класс bootstrap "hide", и вы хотите отобразить его с некоторым скользящим эффектом, например .slideDown(), вы можете обмануть бутстрап, например:

$('#hiddenElement').hide().removeClass('hide').slideDown('fast')

Ответ 3

Я согласен с dfsq, если все, что вы хотите сделать, это показать кнопку. Если вы хотите переключиться между скрытием и показом кнопки, это проще:

$("#buttonEditComment").toggleClass("hide");

Ответ 4

Это то, что я делаю для этих ситуаций:

Я не запускаю элемент html с классом 'hide', но я помещаю style = "display: none".

Это связано с тем, что bootstrap jquery изменяет атрибут style, а не классы, чтобы скрыть/показать.

Пример:

<button type="button" id="btn_cancel" class="btn default" style="display: none">Cancel</button>

или

<button type="button" id="btn_cancel" class="btn default display-hide">Cancel</button>

Позже вы можете запустить все следующее, что будет работать:

$('#btn_cancel').toggle() // toggle between hide/unhide
$('#btn_cancel').hide()
$('#btn_cancel').show()

Вы также можете использовать класс Twitter Bootstrap "display-hide", который также работает с методом jQuery IU.toggle().