Допустим, я создаю такой элемент 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?

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

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

Во-вторых, используйте .Query '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;
}

Просто:

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

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

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

Используйте загрузчик .collapse вместо .hidden

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

Это решение устарело. Используйте решение с наибольшим количеством голосов.

hideКласс полезен , чтобы сохранить содержание скрытую на странице загрузки.

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

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

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

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

.hideMe {
    display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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();
});

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

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

$(function(){

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

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

})

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

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

.rb-hide { display: none; }
.rb-pull-left { float: left; }
etc...

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

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

/**
 * 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 поставляется с решением этой проблемы.

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

Обновление : теперь я использую .collapseи $('.collapse').show().

Для Bootstrap 4 Альфа 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 можно использовать для переключения только видимости элемента, то есть его отображение не изменяется, и элемент все еще может влиять на поток документа.

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/

Используйте следующий фрагмент для Bootstrap 4, который расширяет jQuery:

(function( $ ) {

    $.fn.hideShow = function( action ) {

        if ( action.toUpperCase() === "SHOW") {
            // show
            if(this.hasClass("d-none"))
            {
                this.removeClass("d-none");
            }

            this.addClass("d-block");

        }

        if ( action.toUpperCase() === "HIDE" ) {
            // hide
            if(this.hasClass("d-block"))
            {
                this.removeClass("d-block");
            }

            this.addClass("d-none");
      }

          return this;
    };

}( jQuery ));

1. Поместите приведенный выше код в файл. Давайте предположим, что "myJqExt.js"

2. Включите файл после того, как jQuery был включен.

3. Используйте это используя синтаксис

   $ () HideShow ( 'скрыть').

   $ () HideShow ( 'шоу').

надеюсь, вы, ребята, найдете это полезным. :-)

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

Основываясь на вышеупомянутых ответах, я только что добавил свои собственные функции, и это далее не конфликтует с доступными функциями 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;
    };

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

.скрывать:

.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 как есть и просто удалил "! Important" из класса ".hide" (который в любом случае считается устаревшим). но вы также можете просто переопределить его в своем собственном CSS, я просто хотел, чтобы все мои приложения работали одинаково, поэтому я изменил файл Bootstrap CSS.

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

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

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

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

В Bootstrap 4 вы скрываете элемент:

<p id="insufficient-balance-warning" class="d-none alert alert-danger">Pay me</p>

🛑 Тогда, конечно, вы можете буквально показать это с:

if (pizzaFundsAreLow) {
  $('#insufficient-balance-warning').removeClass('d-none');
}

If Но если вы сделаете это семантическим способом, перенеся ответственность с Bootstrap на jQuery, то вы сможете использовать другие тонкости jQuery, такие как fading:

if (pizzaFundsAreLow) {
  $('#insufficient-balance-warning').hide().removeClass('d-none').fadeIn();
}

Twitter Bootstrap предоставляет классы для переключения контента, см. Https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.less .

Я совершенно новичок в jQuery, и после прочтения их документов я пришел к другому решению, чтобы объединить Twitter Bootstrap + jQuery.

Во-первых, решение «скрыть» и «показать» элемент (класс wsis-collapse) при нажатии на другой элемент (класс wsis-toggle) заключается в использовании .toggle .

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle();
    });
});

Вы уже скрыли элемент .wsis-collapseс помощью класса Twitter Bootstrap (V3) .hidden:

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

Когда вы нажимаете .wsis-toggle, jQuery добавляет встроенный стиль:

display: block

Из-за !importantвстроенной загрузки Twitter этот встроенный стиль не действует, поэтому нам нужно удалить .hiddenкласс, но я не буду рекомендовать .removeClassэто! Потому что, когда jQuery снова собирается что-то скрывать, он также добавляет встроенный стиль:

display: none

Это не то же самое, что класс .hidden Twitter Bootstrap, который также оптимизирован для AT (средства чтения с экрана). Итак, если мы хотим показать скрытый div, нам нужно избавиться от .hiddenкласса Twitter Bootstrap, чтобы мы избавились от важных утверждений, но если мы снова его скрываем, мы хотим .hiddenвернуть класс снова! Мы можем использовать [.toggleClass] [3] для этого.

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle().toggleClass( "hidden" );
    });
});

Таким образом, вы продолжаете использовать скрытый класс каждый раз, когда содержимое скрыто.

.showКласс ТБ фактически такой же , как встроенный стиль в JQuery, как 'display: block'. Но если .showкласс в какой-то момент будет другим, тогда вы просто добавите и этот класс:

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle().toggleClass( "hidden show" );
    });
});