it-swarm.com.ru

Как скрыть элемент с помощью Twitter Bootstrap и ​​показать его с помощью jQuery?

Допустим, я создаю такой элемент HTML,

<div id="my-div" class="hidden">Hello, TB3</div>
<div id="my-div" class="hide">Hello, TB4</div>
<div id="my-div" class="d-none">Hello, TB4</div>

Как я могу показать и скрыть этот элемент HTML из jQuery/Javascript.

JavaScript:

$(function(){
  $("#my-div").show();
});

Результат: (с любым из них).

Я хотел бы, чтобы элементы выше были скрыты.

Какой самый простой способ скрыть элемент с помощью Bootstrap и ​​показать его с помощью jQuery?

208
psylosss

Правильный ответ

Bootstrap 4.x

Bootstrap 4.x использует новый класс .d-none . Вместо использования либо .hidden, либо .hide, если вы используете Bootstrap 4.x, используйте .d-none.

<div id="myId" class="d-none">Foobar</div>
  • Чтобы показать это: $("#myId").removeClass('d-none');
  • Чтобы скрыть это: $("#myId").addClass('d-none');
  • Чтобы переключить его: $("#myId").toggleClass('d-none');

(благодаря комментарию Fangming)

Bootstrap 3.x

Во-первых, не используйте .hide! Используйте .hidden. Как уже говорили другие, .hide устарела,

.hide доступен, но он не всегда влияет на программы чтения с экрана и устарел с v3.0.1

Во-вторых, используйте jQuery's . ToggleClass () , . AddClass () и . RemoveClass ()

<div id="myId" class="hidden">Foobar</div>
  • Чтобы показать это: $("#myId").removeClass('hidden');
  • Чтобы скрыть это: $("#myId").addClass('hidden');
  • Чтобы переключить его: $("#myId").toggleClass('hidden');

Не используйте класс css .show, у него очень маленький вариант использования. Определения show, hidden и invisible находятся в документы .

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}
346
Evan Carroll

Просто:

$(function(){
  $("#my-div").removeClass('hide');
});

Или, если вы хотите, чтобы класс все еще был там:

$(function(){
  $("#my-div").css('display', 'block !important');
});
65
Razz

Класс hide полезен для скрытия содержимого при загрузке страницы.

Мое решение этого во время инициализации, переключиться на JQuery's Hide:

$('.targets').hide().removeClass('hide');

Тогда show() и hide() должны работать как обычно.

14
Dustin Graham

Используйте bootstrap .collapse вместо .hidden

Позже в JQuery вы можете использовать .show () или .hide () для управления им

14
Iván

Другой способ справиться с этим раздражением - создать собственный CSS-класс, который не устанавливает! Важное в конце правила, например так:

.hideMe {
    display: none;
}

и использовал вот так:

<div id="header-mask" class="hideMe"></div>

и теперь jQuery скрывается работает

$('#header-mask').show();
13
dbrin

Метод @ dustin-graham обрисовал в общих чертах, как я делаю это также. Помните также, что bootstrap 3 теперь использует "hidden" вместо "hide" согласно их документации по адресу getbootstrap . Так что я бы сделал что-то вроде этого:

$(document).ready(function() {
    $('.hide').hide().removeClass('hide');
    $('.hidden').hide().removeClass('hidden');
});

Тогда всякий раз, когда используются методы jQuery show() и hide(), конфликт не возникает.

5
MichaelJTaylor

Инициируйте элемент следующим образом:

<div id='foo' style="display: none"></div>

А затем используйте событие, которое вы хотите показать, как таковое:

$('#foo').show();

Я считаю, что самый простой путь.

5
Théo T. Carranza

HTML:

<div id="my-div" class="hide">Hello, TB3</div>

Javascript:

$(function(){
    //If the HIDE class exists then remove it, But first hide DIV
    if ( $("#my-div").hasClass( 'hide' ) ) $("#my-div").hide().removeClass('hide');

    //Now, you can use any of these functions to display
    $("#my-div").show();
    //$("#my-div").fadeIn();
    //$("#my-div").toggle();
});
3
Andres Separ

Ответ Разза хорош, если вы готовы переписать то, что сделали.

Был в той же беде и работал со следующим:

/**
 * The problem: https://github.com/twbs/bootstrap/issues/9881
 * 
 * This script enhances jQuery's methods: show and hide dynamically.
 * If the element was hidden by bootstrap's css class 'hide', remove it first.
 * Do similar in overriding the method 'hide'.
 */
!function($) {
    "use strict";

    var oldShowHide = {'show': $.fn.show, 'hide': $.fn.hide};
    $.fn.extend({
        show: function() {
            this.each(function(index) {
                var $element = $(this);
                if ($element.hasClass('hide')) {
                    $element.removeClass('hide');
                }
            });
            return oldShowHide.show.call(this);
        },
        hide: function() {
            this.each(function(index) {
                var $element = $(this);
                if ($element.hasClass('show')) {
                    $element.removeClass('show');
                }
            });
            return oldShowHide.hide.call(this);
        }
    });
}(window.jQuery);

Выбросьте его, когда Bootstrap исправит эту проблему.

2
badboy

В bootstrap 4 вы можете использовать класс d-none, чтобы полностью скрыть элемент. https://getbootstrap.com/docs/4.0/utilities/display/

2
Hossein

Недавно столкнулся с этим при обновлении с 2.3 до 3.1; наша анимация jQuery (slideDown) сломалась, потому что мы помещали hide в элементы шаблона страницы. Мы пошли по пути создания пространственно-распределенных версий классов Bootstrap, которые теперь содержат уродливое ! Важный правило.

.rb-hide { display: none; }
.rb-pull-left { float: left; }
etc...
2
JacksonT
$(function(){

$("#my-div").toggle();

$("#my-div").click(function(){$("#my-div").toggle()})

})

// вам даже не нужно устанавливать ни #my-div.hide, ни !important, просто вставьте/повторите переключатель в функции события.

2
Ray C Lin

Мне нравится использовать toggleClass:

var switch = true; //it can be an JSON value ...
$("#my-div").toggleClass('hide', switch);
2
AndreDurao

Для Bootstrap 4 Alpha 6

Для Bootstrap 4 вы должны использовать .hidden-xs-up.

https://v4-alpha.getbootstrap.com/layout/responsive-utilities/#available-classes

Классы .hidden - * - up скрывают элемент, когда область просмотра находится на заданной точке останова или шире. Например, .hidden-md-up скрывает элемент в средних, больших и очень больших окнах просмотра.

Существует также атрибут hidden HTML5.

https://v4-alpha.getbootstrap.com/content/reboot/#html5-hidden-attribute

HTML5 добавляет новый глобальный атрибут с именем [скрытый], который имеет стиль отображения: по умолчанию ни один. Заимствуя идею из PureCSS, мы улучшаем это значение по умолчанию, делая [скрытый] {показ: нет! Важным; }, чтобы предотвратить случайное переопределение его отображения. Хотя [hidden] изначально не поддерживается IE10, явное объявление в нашем CSS решает эту проблему.

<input type="text" hidden>

Существует также .invisible, который влияет на макет.

https://v4-alpha.getbootstrap.com/utilities/invisible-content/

Класс .invisible можно использовать для переключения только видимости элемента, то есть его отображение не изменяется, и элемент все еще может влиять на поток документа.

1
Chloe

hide и hidden оба устарели и впоследствии удаляются, больше не существуют в новых версиях. Вы можете использовать классы d-none/d-sm-none/invisible и т.д. В зависимости от ваших потребностей. Вероятная причина, по которой они были удалены, заключается в том, что hidden/hide немного запутан в контексте CSS. В CSS скрыть (скрытый) используется для видимости, а не для отображения. видимость и отображение разные вещи.

Если вам нужен класс для видимости: скрытый, то вам нужен невидимый класс из утилит видимости.

Проверьте ниже и видимость и отображение утилит:

https://getbootstrap.com/docs/4.1/utilities/visibility/

https://getbootstrap.com/docs/4.1/utilities/display/

1
Selay

Bootstrap, JQuery, пространства имен ... Что не так с простым:

var x = document.getElementById('my-div');
x.className.replace(/\bhide\b/, ''); //remove any hide class
x.style.display = ''; //show
x.style.display = 'none'; //hide

Вы можете создать небольшую вспомогательную функцию, совместимую с KISS:

function mydisplay(id, display) {
    var node = (typeof id == 'string') ? document.getElementById(id) : id;
    node.className.replace(/\bhide\b/, '');
    if (node) {
        if (typeof display == 'undefined') {
            display = (node.style.display != 'none');
        } else if (typeof display == 'string' && display == 'toggle') {
            display = mydisplay(node, !mydisplay(node));
        } else {
            node.style.display = (display) ? '' : 'none';
        }
    }
    return display;
}
is_hidden = mydisplay('my-div'); //actual state
mydisplay('my-div', false); //hide
mydisplay('my-div', true); //show
mydisplay('my-div', 'toggle'); //toggle state
0
Edakos

Я решил свою проблему, отредактировав CSS-файл Bootstrap, см. Их документацию:

.скрывать:

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1

.hide {
  display: none !important;
}

.hidden - это то, что мы предполагаем использовать сейчас, но на самом деле это:

.hidden {
  display: none !important;
  visibility: hidden !important;
}

JQuery "fadeIn" не будет работать из-за "видимости".

Итак, для последней Bootstrap .hide больше не используется, но он все еще находится в файле min.css. поэтому я оставил .hidden AS IS и ​​просто удалил "! Important" из класса ".hide" (который в любом случае считается устаревшим). но вы также можете просто переопределить его в своем собственном CSS, я просто хотел, чтобы все мои приложения работали одинаково, поэтому я изменил файл Bootstrap CSS.

И теперь jQuery "fadeIn ()" работает.

Причина, по которой я это сделал по сравнению с приведенными выше предложениями, заключается в том, что, когда вы "удаляете класс ('. Hide')", объект сразу показывается, и вы пропускаете анимацию :)

Надеюсь, это помогло другим.

0
Ricky Levi

Основываясь на вышеупомянутых ответах, я только что добавил свои собственные функции, и это далее не конфликтует с доступными функциями jquery, такими как .hide (), .show (), .toggle (). Надеюсь, поможет.

    /*
     * .hideElement()
     * Hide the matched elements. 
     */
    $.fn.hideElement = function(){
        $(this).addClass('hidden');
        return this;
    };

    /*
     * .showElement()
     * Show the matched elements.
     */
    $.fn.showElement = function(){
        $(this).removeClass('hidden');
        return this;
    };

    /*
     * .toggleElement()
     * Toggle the matched elements.
     */
    $.fn.toggleElement = function(){
        $(this).toggleClass('hidden');
        return this;
    };
0
Sagar Gala