JavaScipt переключатель, или как отследить показ/скрытие блока?

Question

[Игорь Пушкарский]

Приветствую!



Совсем недавно занимаюсь версткой так что помидорами тухлыми не кидать =)



В общем суть такая:



Есть HTML/CSS блок который при нажатии на «кнопку (тег: a )», форма должна выезжать(заезжать обратно) с правой стороны, и кнопка должна вместе с ней ездить.



Рассматривал несколько вариантов:



-использовать атрибут "cheked"(менять атрибут)

-использовать CSS свойство display(добавлять и удалять CSS)



Но все эти варианты как мне кажется «голимый костыль», поправьте меня если я не прав =), может есть какое то другое решение?



И вообще как решаются такие задачи?



Если нет, то хотелось бы узнать есть ли какая-нибудь функция или метод JS или JQuery который возвращает значение display?



Состояние display:none



Состояние display:block

Comments

[Олег Торбасов]

А почему по тегу a должна форма куда-то там ездить? По тегу a вообще-то должен меняться location.

Answer 1

[xserg]

Да

stackoverflow.com/questions/1875403/jquery-how-to-get-the-style-display-attribute-none-block

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

$('#theid').css('display') == 'none'

или

$('.deal_details').is(':visible')

Comments

[Игорь Пушкарский]

Спасибо большое думаю вариант с display самый подходящий.

А как можно прилепить кнопку корзины к выпадающей панели справа?

Answer 2

[int03e]

$('#whatever').css('display')

Вот так можно узнать значение. А вообще я всегда описывал в css класс hidden (в нем display:none) и потом удалял-добавлял его(hasClass, addClass, removeClass).

Comments

[Игорь Пушкарский]

Интересный вариант =) Один класс для всех решений +1

[Олег Торбасов]

Во-первых, classList, а для старых браузеров — полифилл. Во-вторых, в HTML5 для такой цели атрибут есть hidden, так что уж лучше им пользоваться.

Answer 3

[Alexander]

А может быть вам подайдёт такое всётаки?
Функция сама отслеживает в каком состоянии объект и выполняет открытие(если закрыто) или закрытие(если открыто).
api.jquery.com/toggle/
api.jquery.com/slideToggle/
Там же можете через
toggle(«toggle», «show», «hide») поиграть с анимацией появления/скрытия.

Мой пример.

$('#add_gi span').click(function(){
    $("#add_gi #add_gi_list").toggle();
});

Сам когда-то на подобном, как вы рассуждал. Пока не узнал что есть готовая функция у jQuery

Comments

[Игорь Пушкарский]

toggle, как я о нём не подумал. Неплохой вариант.

Answer 4

[egorinsk]

> который при нажатии на «кнопку (тег: a )»

Это конечно не совсем по теме вопроса, но для создания кнопок в HTML есть тег button, button по-английски значит «кнопка» (или тег span, если button не верстается нормально). Тег A предназначен для создания гиперссылок.

Я не знаю, откуда пошла эта нездоровая тенденция (подозреваю, что с запада, так же как и дурная тенденция писать [br /] со слешем, видимо люди думают, что HTML — это вид XML), но всюду вижу, как кнопки и псевдоссылки верстаются тегом A с костылями вроде javascript void. И на сайтах, и в с татьях на Хабре и в каком-нибудь smashing magazine. Уровень неграмотности поражает. Начинающие не хотят читать мануалы и стандарты, а хотят учиться по неграмотным статьям из блогов неграмотных верстальщиков. А опытные верстальщики делают так много лет и не хотят переучиваться.

Потому советую вам встать наперекор общественному мнению, учиться верстать правильно и никогда не писать a href=# и a href=javascirpt void. После этого вам не придется ломать голову тем, что значит «return false».

Comments

[Alexander]

А если вариант, когда при клике должно открыться модальное окно с формой, но если оно не открылось (JS отключён, то перевести на страницу с формой без JSa)?
Или вы только про href="#"?

[egorinsk]

Да. про href #. Если ссылка ведет на полноценную страницу, это вполне себе ссылка.

[Олег Торбасов]

XML — это хорошо. Если HTML-код будет соответствовать ещё и спецификации XML, хуже уж точно не будет.
А про кнопки согласен. Правда, у баттона со стилизацией не всё гладко…

[egorinsk]

Нет, не хорошо, так как при этом он перестает соответствовать спецификации HTML.

[Игорь Пушкарский]

egorinsk, Честно говоря сам не знаю откуда взял, Хотелось бы немного пояснить коль, зашел вопрос о разнице между тегом и , в чем же разница и почему модельные окно открывать лучше ссылками а не кнопками?

[egorinsk]

Разница между тегами a и button? Разница очень простая. Ссылка (которая создается с помощью тега a) указывает на какую-то страницу. Ссылку можно открыть, открыть в новом окне, скопировать, переслать по скайпу или запостить вконткте. Кнопку (делается тегом button или span) можно только нажать. Она не содержит в себе никаких адресов и ее очевидно нельзя переслать по скайпу.

Писать a href=# или a href=javascript: в корне неверно, так как эти «ссылки» не являются настоящими ссылками, ни на какую страницу не указывают, по скайпу их переслать нельзя. Для таких псевдо-ссылок надо использовать НЕ тег a, а button или span. Что именно — дело вкуса, кому-то нравится button, кому-то span.

> почему модельные окно открывать лучше ссылками а не кнопками?

Лучше делать кнопками, просто у товарища syschel есть желание сделать сайт, чтобы он работал даже без яваскрипт, и потому он хочет использовать ссылку.

Answer 5

[Андрей Буров]

Если есть jquery,

<a href="#" onclick="$('#yourblock').toggle(); return false">кнопка</a>

Он оперирует с display!

сверстать так, чтоб кнопка была привязана к позиции/наличии этого yourblock

Comments

[Игорь Пушкарский]

Немного поясни, получаются return false это как бы логическое отрицание? То есть, меняем значение на противоположное?

Как привязать к значению ширины?

Например менять $('.recycle_box_open').css({'right':'$('.recycle_box_open').css({'right':'400px'}) + $('.recycle_box').width()' });, как то так?

PS: а для чего пишется href="#"? как мне помнится он не соответствует валидации, стандартам W3.ORG?

[Андрей Буров]

return false тут для того, чтоб при клике по href="#", браузер не менял ссылку example.org/index на example.org/index#

Answer 6

[Игорь Пушкарский]

Вот оно что =)