Задать вопрос
serovpochta
@serovpochta
Лысый
javascript

Нужно «связать» два скрипта отзывающиеся по клику?

Имеется заготовка
там два скрипта, которые как-то надо связать так, что бы при клике на кнопку .emb открывать блок .meta-data, который открывается снизу родительского блока .pinbox (в котором находится и кнопка .emb)

Там все практически правильно происходит, но не совсем..

Нужно при клике и открывать блок снизу и добавлять родительскому объекту .pinbox стиль, а затем при клике в любое место (но только не родительского объекта .pinbox) закрывать див который снизу и возвращать стиль родительскому блоку .pinbox обратно

Имеется вариант сокращения скриптов таким образом, но опять же, в этом варианте не хватает того, что бы блок .meta-data закрывался только по клику на область не относящуюся к родительскому .pinbox, а еще не хватает возвращения стиля родительскому .pinbox

Если сложно закрывать родительский .pinbox по любому месту не относящемуся к .pinbox, то хрен с ним!
Самое важное,- это возвращать стиль блоку .pinbox как будто никаких изменений скрипты и не вносили этому объекту
И еще, объектов на странице .pinbox много и все они содержат кнопку .emb и блок .meta-data
Поэтому надо, что бы скрипт действовал только на один выборочный кликом объект, а не на все разом

Помогите, кто чем может )
Спасибо за внимание!
  • Вопрос задан
  • 155 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
alone_lion1987
@alone_lion1987
Веб-разработчик 
$(function () {
    $('.emb').each(function () {
        $(this).on('click', function () {

            var block = $(this).next('.meta-data'),
                pinbox = $(this).parent('.pinbox');

            pinbox.toggleClass('pinbox_active');

            if (pinbox.hasClass('pinbox_active')) {
                block.slideDown(100);
                $(document).on('click', function (event) {
                    if ($(event.target).closest(pinbox).length)
                        return;
                    block.hide();
                    pinbox.removeClass('pinbox_active');
                    event.stopPropagation();
                });
            }
        });
    });
});


Попробуй так.
Верно работает? Или нет? Вот исходник: https://jsfiddle.net/rrzharikov/ng46k39q/
Ответ написан
16 комментариев
16 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Консультация по рассылкам в ВК
02 мая 2024, в 21:59
15000 руб./за проект
Заменить файл в ссылке
02 мая 2024, в 21:54
1000 руб./в час
Разработать Web Application для Telegram
02 мая 2024, в 21:27
300000 руб./за проект
Ещё заказы