Задать вопрос
@lagudal
javascript

Как правильно реализовать события по клику?

Приветствую, появилась необходимость вернуться к реализации breadcrumbs, в силу того, что в моей ситуации названия категорий и конечных продуктов могут быть очень длинными. По этой причине их либо совсем выключают посредством media в css, либо извращаются кто как может.
Показалось логичным реализовать один подсмотренный вариант со свертыванием элементов и раскрытием по ховеру.
Но тут возникает проблема в мобильных, где нет интуитивного ховер-эффекта. А собственно, в основном для мобильных это все и надо, так как на широких экранах длинные названия не очень то критичны. Поэтому было решено сделать раскрытие не по ховеру, а по клику, ну если уж совсем красиво, то по ховеру до ширины скажем 992, а все что меньше - по клику. Но это позже, пока проблема в том, что если я делаю событие по клику, то мне нужно отключить переход по этому клику. Ну то есть, если свернуто - то по клику развернуть, но не переходить. А если развернуто, то по клику перейти. Пытаюсь с помощью jquery addClass и removeClass, т.е. когда свернуто один класс, которому запрет на переход, а когда развернуто - то другой класс, которому разрешить переход. Но что то не идет, что то не так делаю. И классы вроде бы удаляются и добавляются, но если дать первому классу - свернутому - запрет на переход, то не переходит вообще никак.

Вот код, полагаю, что то простое упускаю...
https://codepen.io/lagudal/pen/oaqdMK
  • Вопрос задан
  • 120 просмотров
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 2
YumeReaver
@YumeReaver
Бургомистр
Может просто после клика добавлять href атрибут?
$("button").click(function(){
        $("#w3s").attr("href", "https://www.w3schools.com/jquery/");
    });

Или вот готовое через preventDefault():
$(document).on('click', '.collapsed', function () {
  event.preventDefault();
  $(this).css( "max-width", "1000px" );
  $(this).removeClass("collapsed");
  $(this).addClass("expanded");
});
$(document).on('mouseout', '.expanded', function () {
  $(this).css( "max-width", "40px" );
  $(this).removeClass("expanded");
  $(this).addClass("collapsed");
});

P.S. не пишите несколько функций в одну строку.
Ответ написан
Комментировать
Комментировать
0xD34F
@0xD34F Куратор тега JavaScript
Во-первых - вы пытаетесь работать с элементами, которых нет (это я про .expanded). Гуглите "делегирование".

Во-вторых - поскольку в разные моменты времени поведение должно быть разным, click(false) не годится в качестве отмены действия по умолчанию - надо сделать нормальный обработчик, в котором выполнять preventDefault. Типа так (ну или тоже через делегирование, но это как-то глупо будет выглядеть - два обработчика одного события, хотя мог бы быть и один).
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@dmitryfx
$(".collapsed").click(false);
$(".expanded").click(true);
- вот в этом не уверен, доки не смотрел, но думаю, что клик привязывается не к css классу, а к самому объекту, на который указывает класс. то есть класс - просто селектор, чтобы найти нужный объект. Вы потом меняете класс, а событие при этом не меняется, либо нужно снова вызвать эту конструкцию.

я бы просто заменял функции, которые вызываются первым/вторым кликом:

function FirstClick{
css animation expand
button.click = SecondClick();
}

function SecondClick{
gotoURL.
css animation contract
button.click =FirstClick();
}

buton.click = FirstClick();
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
[python,go] Залить ВИДЕО в тикток
19 апр. 2024, в 23:00
5000 руб./за проект
Разработка VST-плагина
19 апр. 2024, в 20:43
20000 руб./за проект
Нарисовать баннер для интернет-магазина
19 апр. 2024, в 20:35
500 руб./в час
Ещё заказы