Вы здесь написали полнейшую чушь. У вас в html переменная "data-accordion" равна OPEN, следовательно всё что вы прописали в JQ в IF где "if (data === 'close'){" и так далее, тупо не будет вызывать и работать, весь ваш аккордtон работает за счет ОДНОЙ СТРОЧКИ "$(this).next('.accordion-body').not(':animated').slideToggle()". Очень интересно вы пишите)) я поржал) У меня прям неистово бомбануло, и я долго ждал когда же вы исправите или добавите open. По итогу у вас 13 строк кода В НИКУДА! Пруфы: codepen.io/magistr4815/pen/prYeMM Я там коментами пометил что можно удалить и всё будет продолжать работать. Программист блин. А ещё, ну так для справки, в JQ обычно в самом начале объявляется функция, в которой пишется весь код. Делается это для что бы подождать пока загрузится html и css, и не вызывать потом функцию аккордеон отдельно. Это основа когда ты пишешь на JQ. А ну и ещё, есть разница между IF == и === идентично или просто равно, у вас не было необходимости юзать ===. Почитайте на досуге.
Посмотрел видео мне понравилось . Есть что изменить , но вполне адекватно показывается. А к тебе magistr4815 есть пару вопросов: с чего такой негатив в критике ты сам можешь записать видео более подробно и правильно или ты можешь только 3/14 -здеть ???
Вот вам рабочий код $('.accordion-title').click(function(){ $(this).toggleClass('active'); $(this).next().toggleClass('active'); $(this).next().slideUp(); if( $('.accordion-body.active') ){ $('.accordion-body.active').slideDown(); } });
Такой вопрос: как в этот код добавить условие, чтобы содержимое первого контейнера по умолчанию было открытым. И что бы при этом при последующем клике на другом "хедере", уже ранее открытые контейнеры закрывались?
урок классный но много лишних строчек кода, я сократил ваш код до : $(document).ready(function(){ $('.accordion-header').on("click", function(){ $(this).next('.accordion-body').slideToggle(); $(this).toggleClass('active'); }); });
Автор, а ты тестировал, что написал? Нажми дабл кликом на свой акардеон. Пока у тебя отрабатывает анимация слайда, крестик снова сделается минусом и получится открытый список с Плюсом справа. Держу в курсе.
@@SuprunAlexey Ты тестировал работоспособность кода, он рабочий да. Но есть баг, который я выше описал) Можно пофиксить, поставив скорость анимации fast
добрый день, я правильно понимаю что через кастомный css вы предпочитаете сами настраивать стили, я вот привык использовать bootstrp3 для простоты, или вот еще нравится w3, и как правило этого для стилизации фронтенда мне достаточно (соответственно все фишки css я и не знаю), ну js+jquery это само собой маст хев, прокомментируйте пожалуйста
Посмотрев несколько роликов, замечаю лишние CSS свойства. Так трудно отредактировать и удалить их? Зачем новичкам лишний информационный хлам? С теорией норм, а вот с практикой не очень. За теорию я благодарю, знаю что есть документация, но ролик с объснениями не помешает.
Слабенький пример. Если поставить на странице 2 аккордеона с атрибутом data-accordion="close" то, при клике, они будут конфликтовать. Если у меня открыт первый аккордеон и я нажму на второй, то второй не откроется, а первый закроется =D codepen.io/wsjs/pen/Ojrjxa?editors=1000
Вы здесь написали полнейшую чушь. У вас в html переменная "data-accordion" равна OPEN, следовательно всё что вы прописали в JQ в IF где "if (data === 'close'){" и так далее, тупо не будет вызывать и работать, весь ваш аккордtон работает за счет ОДНОЙ СТРОЧКИ "$(this).next('.accordion-body').not(':animated').slideToggle()".
Очень интересно вы пишите)) я поржал) У меня прям неистово бомбануло, и я долго ждал когда же вы исправите или добавите open. По итогу у вас 13 строк кода В НИКУДА!
Пруфы: codepen.io/magistr4815/pen/prYeMM
Я там коментами пометил что можно удалить и всё будет продолжать работать. Программист блин.
А ещё, ну так для справки, в JQ обычно в самом начале объявляется функция, в которой пишется весь код. Делается это для что бы подождать пока загрузится html и css, и не вызывать потом функцию аккордеон отдельно. Это основа когда ты пишешь на JQ.
А ну и ещё, есть разница между IF == и === идентично или просто равно, у вас не было необходимости юзать ===. Почитайте на досуге.
Молодец! Ото думаю что то не то с моим кодом!
А вас не смущает тот факт, что в вашем коде из одной строчьки стрелочьки остаються статическими?
В вашей версии с удалёнными 13 строками крестик не перевернётся на 45% ))
Посмотрел видео мне понравилось . Есть что изменить , но вполне адекватно показывается. А к тебе magistr4815 есть пару вопросов: с чего такой негатив в критике ты сам можешь записать видео более подробно и правильно или ты можешь только 3/14 -здеть ???
всегда люто плюсую, хочу чтобы вы продолжали :)
+Python My спасибо вам
Немного подправить код в html + css и можно в одну строчку. $(this).toggleClass('active').next().slideToggle(500);
Есть такое дело
Вот вам рабочий код
$('.accordion-title').click(function(){
$(this).toggleClass('active');
$(this).next().toggleClass('active');
$(this).next().slideUp();
if( $('.accordion-body.active') ){
$('.accordion-body.active').slideDown();
}
});
Такой вопрос: как в этот код добавить условие, чтобы содержимое первого контейнера по умолчанию было открытым. И что бы при этом при последующем клике на другом "хедере", уже ранее открытые контейнеры закрывались?
урок классный но много лишних строчек кода, я сократил ваш код до :
$(document).ready(function(){
$('.accordion-header').on("click", function(){
$(this).next('.accordion-body').slideToggle();
$(this).toggleClass('active');
});
});
Для работы с data атрибутами в jQuery имеется метод .data() api.jquery.com/data/
Спасибо за уроки jQuery! Было бы хорошо если сделать несколько примеров использования Ajax. Интересно еще что-то сделать с "Json"
+Aleksandr Kovel посмотрим
уроки cупер! было бы интересно посмотреть видосы, как делается калькулятор с ползунками, селектами, чекбоксами и тд...
Автор, а ты тестировал, что написал? Нажми дабл кликом на свой акардеон. Пока у тебя отрабатывает анимация слайда, крестик снова сделается минусом и получится открытый список с Плюсом справа. Держу в курсе.
Та вроде как на видео прям тестировал
@@SuprunAlexey Ты тестировал работоспособность кода, он рабочий да. Но есть баг, который я выше описал) Можно пофиксить, поставив скорость анимации fast
спасибо, очень помог!))
У вас работает?
добрый день, я правильно понимаю что через кастомный css вы предпочитаете сами настраивать стили, я вот привык использовать bootstrp3 для простоты, или вот еще нравится w3, и как правило этого для стилизации фронтенда мне достаточно (соответственно все фишки css я и не знаю), ну js+jquery это само собой маст хев, прокомментируйте пожалуйста
Вы же бэкэндщик насколько я понял? Вам достаточно этого знать)
ок, спасибо, согласен :)
Почему у меня юникод-символ плюса отображается в виде пустого квадратика? Как пофиксить? Все делаю, как в видео. Кодировка UTF-8.
яб перезалил видос. Отрефактори ифы. + есть сомнения в работе кода.
Было бы плюсом вести на гитхабе исходники уроков.
четко, ровно , збс
Спасибо!
Ставь лайк, если тоже всегда получаешь значения атрибутов data-name методом attr)
Вместо текста у меня флексбокс, когда он раскрывается все его настройки слетают к дефолтным. Че делать ?
Посмотрев несколько роликов, замечаю лишние CSS свойства.
Так трудно отредактировать и удалить их?
Зачем новичкам лишний информационный хлам?
С теорией норм, а вот с практикой не очень.
За теорию я благодарю, знаю что есть документация, но ролик с объснениями не помешает.
народ а как добавить условие чтобы одна лишка была открыта по умолчанию и открывалась бы при клике только одна ли а остальные закрывались ?
тоже интересует
все сделал по уроку, не работает, проверил 100 раз, тупо время убил. Придется самостоятельно разобраться с js
30 минут писал код нечего не раюотает
видео про php будут ?
Обязательно!
распространяю твой видосы в грузинской IT сфере !!
Спасибо!
как у вас в Грузии с работой для бекендщиков python/django/mуsql?
и python/django есть но редко сениор python в грузие навернаи вобше нету тут php
можете сделать урок верстки где будет использовано все наши знания html,css,javascript,j-Query такое full-stack front end
+Ja Sa да, как то надо будет
Слабенький пример.
Если поставить на странице 2 аккордеона с атрибутом data-accordion="close" то, при клике, они будут конфликтовать. Если у меня открыт первый аккордеон и я нажму на второй, то второй не откроется, а первый закроется =D
codepen.io/wsjs/pen/Ojrjxa?editors=1000
Кто ставит на странице 2 аккордеона? Если проект предполагает такое, то и делать его нужно совершенно по другому)
Web Developer Blog заказы бывают разные и 2 аккордеона не исключение :) Хотелось бы посмотреть как делать правильно виджеты для сайтов
Почему нельзя было просто обойтись методом для раскрывания аккордеона .stop().slideToggle(); ?
Так интереснее
Зачем так усложнять?
Вот мой вариант: codepen.io/doston007/pen/KByJaN
Спасибо за варик!
А как сделать вариант, при котором закрываются открытые элементы при клике на закрытый?)
а как вместо - + добавить иконку триугольника?
Чем дальше, тем ужасней ))
accordEon....
Вы там курс ещё не записали? :)
Честно вообще ничего не объясняешь , просто сам себе написал и все (
Вы основы по jquery смотрели?
Web Developer Blog да но на другом Канале «Хауди Хо»