Допустим, я создаю такой 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 использует новый класс .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)
Во-первых, не используйте .hide! Используйте .hidden. Как уже говорили другие, .hide устарела,
Доступен .hide, но он не всегда влияет на программы чтения с экрана и устарел с версии 3.0.1
Во-вторых, используйте jQuery .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');
});
Это решение устарело. Используйте решение с наибольшим количеством голосов.
Класс hide полезен для скрытия содержимого при загрузке страницы.
Мое решение этого во время инициализации, переключитесь на JQuery Hide:
$('.targets').hide().removeClass('hide');
Тогда show() и hide() должны работать как обычно.
Использовать bootstrap.collapse вместо .hidden
Позже в JQuery вы можете использовать .show() или .hide() для управления им.
Другим способом устранения этой досады является создание собственного CSS-класса, который не устанавливает значение! важно в конце правила, например:
.hideMe {
display: none;
}
и используется так:
<div id="header-mask" class="hideMe"></div>
и теперь jQuery скрывает работы
$('#header-mask').show();
Метод @dustin-graham описан как я тоже это делаю. Помните также, что bootstrap 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 .hide и !important, просто вставьте/повторите переключение в функции события.
Недавно натолкнулся на это при обновлении с 2,3 до 3,1; наши анимации jQuery (slideDown) сломались, потому что мы помещали скрывать элементы в шаблоне страницы. Мы пошли по пути создания имен классов Bootstrap с именами, которые теперь несут уродливое важное правило.
.rb-hide { display: none; }
.rb-pull-left { float: left; }
etc...
Ответ на Razz хорош, если вы хотите переписать то, что вы сделали.
Был в той же самой проблеме и работал со следующим:
/**
* The problem: https://github.com/twbs/bootstrap/issues/9881
*
* This script enhances jQuery methods: show and hide dynamically.
* If the element was hidden by bootstrap 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);Обновление: теперь я использую .collapse и $('.collapse').show().
Для 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 можно использовать для переключения только видимости элемента, то есть его отображение не изменяется, и элемент все еще может влиять на поток документа.
В начальной загрузке 4 вы можете использовать класс d-none, чтобы полностью скрыть элемент.https://getbootstrap.com/docs/4.0/utilities/display/
hide и hidden оба устарели и впоследствии удаляются, больше не существуют в новых версиях. Вы можете использовать классы d-none/d-sm-none/invisible и т.д. В зависимости от ваших потребностей. Вероятная причина, по которой они были удалены, заключается в том, что hidden/hide немного запутан в контексте CSS. В CSS скрыть (скрытый) используется для видимости, а не для отображения. видимость и отображение разные вещи.
Если вам нужен класс для видимости: скрытый, то вам нужен невидимый класс из утилит видимости.
Проверьте ниже и видимость и отображение утилит:
Я решил свою проблему, отредактировав файл Bootstrap CSS, см. их документацию:
.hide:
.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1
.hide {
display: none !important;
}
. Скрытое - это то, что мы предполагаем использовать сейчас, но на самом деле это так:
.hidden {
display: none !important;
visibility: hidden !important;
}
JQuery "fadeIn" не будет работать из-за "видимости".
Итак, для последней Bootstrap.hide больше не используется, но все еще находится в файле min.css. поэтому я оставил .hidden как есть и просто удалил "! Important" из класса ".hide" (который в любом случае считается устаревшим). но вы также можете просто переопределить его в своем собственном CSS, я просто хотел, чтобы все мои приложения работали одинаково, поэтому я изменил файл Bootstrap CSS.
И теперь jQuery "fadeIn()" работает.
Причина, по которой я это сделал по сравнению с приведенными выше предложениями, заключается в том, что при немедленном показе объекта "removeClass ('. Hide')" анимация пропускается :)
Я надеюсь, что это помогло другим.
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;
};
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 Bootstrap в Твиттере, поэтому мы избавимся от важных утверждений, но если мы снова его скрываем, мы хотим получить .hidden снова класс! Мы можем использовать [.toggleClass] [3] для этого.
jQuery(document).ready(function() {
jQuery(".wsis-toggle").click(function(){
jQuery(".wsis-collapse").toggle().toggleClass( "hidden" );
});
});
Таким образом, вы продолжаете использовать скрытый класс каждый раз, когда содержимое скрыто.
Класс .show в TB на самом деле такой же, как встроенный стиль jQuery, оба 'display: block'. Но если в какой-то момент класс .show будет другим, вы просто добавите и этот класс:
jQuery(document).ready(function() {
jQuery(".wsis-toggle").click(function(){
jQuery(".wsis-collapse").toggle().toggleClass( "hidden show" );
});
});