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

Question

[lagudal]

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

Вот код, полагаю, что то простое упускаю...
https://codepen.io/lagudal/pen/oaqdMK

Answer 1

[Dies Irae]

Может просто после клика добавлять 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. не пишите несколько функций в одну строку.

Answer 2

[0xD34F]

Во-первых - вы пытаетесь работать с элементами, которых нет (это я про .expanded). Гуглите "делегирование".

Во-вторых - поскольку в разные моменты времени поведение должно быть разным, click(false) не годится в качестве отмены действия по умолчанию - надо сделать нормальный обработчик, в котором выполнять preventDefault. Типа так (ну или тоже через делегирование, но это как-то глупо будет выглядеть - два обработчика одного события, хотя мог бы быть и один).

Answer 3

[Dmitry]

$(".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();

Comments

[lagudal]

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