Show js: Правильные show/hide/toggle

Эквивалент .show() — jQuery в простом JavaScript

спросил 10 лет, 11 месяцев назад

Изменено 10 лет, 11 месяцев назад

Просмотрено 9к раз

Кто-нибудь знает, что эквивалентно .show() jquery в javascript?

Я пытался использовать document.getElementById и добавлять/удалять класс, который я назвал «показать»//»скрыть», но это не очень хорошо работает. У меня могут быть неправильные атрибуты в этих классах. Я не уверен..

выставочный класс:

 .show{
    должность: родственница;
    дисплей:блок;
}
 

и класс скрытия:

 .hide{
    положение: абсолютное;
    верх: 0px;
    справа: 0 пикселей;
    дисплей:нет;
}
 

Я почти уверен, что есть лучший способ.

• javascript
• jquery
• css

2

 document. getElementById('myElement').style.display = 'блок'; // показывать
document.getElementById('myElement').style.display = 'нет'; // скрывать
 

3

jQuery учитывает значение display до сокрытия. Когда вы запускаете show() , он возвращает его обратно к тому значению, которое было. Итак, это НЕ просто установка свойства display элемента на block и none .

, так что в основном:

 function hide(){
    //получить предыдущее отображаемое значение
    //сохраняем во внутреннем кеше. jQuery имеет внутреннее хранилище данных
    // скрыть элемент
}
показать функцию () {
    // получить предыдущее отображаемое значение для этого элемента
    //применяем к элементу, чтобы показать его
}
 

---

.показать()

Совпадающие элементы будут показаны сразу, без анимации. Это примерно эквивалентно вызову .css('display', 'block') , за исключением того, что свойство display восстанавливается до того состояния, в котором оно было изначально. Если элемент имеет отображаемое значение встроенный , затем скрыт и показан, он снова будет отображаться встроенным.

Попробуйте использовать document.getElementsByClassName, поскольку вы используете .show и .hide. Это классы, и вы пытаетесь настроить таргетинг по идентификатору. Отказ от ответственности: вы можете перепроверить поддержку старых браузеров для этого.

До jQuery я использовал следующий метод для отображения/скрытия элемента:

 HTMLElement.prototype.toggleDisplay = function(on_or_off, display_type) {
    if (typeof(tddisptype) == "undefined") tddisptype = "block";
    вар новый_дисплей;
    if (typeof(on_or_off)!= "логическое значение") {
        если (this.style.display == "none") new_display = display_type;
        иначе new_display = "нет";
    } еще {
        если (on_or_off) new_display = display_type;
        иначе new_display = "нет";
    }
    this.style.display = новый_дисплей;
}​
 

Добавляет функцию toggleDisplay() ко всем элементам; например, те, которые вы можете получить через document. getElementById(). Вы можете передать ему true или false в качестве параметра, чтобы показать или скрыть элемент, или, если вы не передадите ему параметр, он попытается выяснить, показывать или скрывать элемент. Второй аргумент указывает тип отображения, связанный с состоянием «включено»; выше, по умолчанию используется блок .

Использовать document.getElementById("MyId").className='show' document.getElementById("MyId").className='скрыть'

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

Как показать или скрыть элемент на веб-сайте с помощью JavaScript

JavaScript

2 года назад

от Shehroz Azam

Во время веб-разработки пользователям необходимо скрыть или показать некоторые элементы. Этими элементами могут быть кнопка, некоторая анимация, панель навигации и т. д. В большинстве случаев пользователь хочет, чтобы кнопка или панель навигации были видны для настольной точки зрения, но не для мобильной точки зрения.

С помощью JavaScript пользователи могут легко скрыть или показать элемент на веб-странице в зависимости от поведения пользователя. В этой статье мы увидим, как JavaScript используется для этой цели.

Скрытие и отображение элементов в JavaScript

Используя JavaScript, мы можем скрыть или отобразить элемент на веб-странице, используя:

• style.display
• style.visibility

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

Как использовать style. display в JavaScript

: Свойство display представляет элемент, который должен отображаться на вашей веб-странице. Используя это, пользователь может скрыть весь элемент, и страница будет построена так, как будто предыдущего элемента вообще не было.

Синтаксис:

document.getElementById(«id-of-element»).style.display = «»;

Здесь в запятых должно быть указано значение, отображать содержимое или нет. Вот пример:

Чтобы скрыть элемент: style.display = «none»:

Нажмите кнопку «Скрыть меня», чтобы скрыть элемент div: