События нажатия Jquery не запускаются / не расстраиваются между двумя идентичными блоками HTML

Question

Вот моя страница.

Если вы найдете красное поле «Специальное предложение», вы увидите, что оно расширяется при щелчке по заголовку. Внизу страницы есть еще одно идентичное поле. Если вы нажмете на это тоже, вы увидите мою проблему. Событие щелчка запускает оба поля. Это был недосмотр. Моя проблема в том, что я не могу заставить свой альтернативный JS работать. Я подумал, что мог бы просто использовать следующий (div) метод (закомментированный в примере кода), чтобы найти div и развернуть его. Это не похоже на работу.

Вот мой текущий JS, который запускает две коробки одновременно:

//=====Special Offer Expanders START=====
        $('a.expand-offer').click(function(event){
            event.preventDefault();
            //$('a.expand-offer').next('div').slideToggle(200);
            $('div.offer-expander').slideToggle(200);
        });
//=====Special Offer Expanders END===== 

Может ли кто-нибудь увидеть способ различения двух одинаковых блоков в JS, чтобы они расширялись независимо друг от друга? Я подумывал добавить классы «.top» и «.bottom» в разметку, но это грязно, поскольку я хочу иметь возможность использовать разметку Special Offer универсальным образом, без добавления уникальных классов.

---

Извините, это то, что я пробовал до сих пор:

$(this).next('div.offer-expander').slideToggle(200);
$(this).next('.offer-expander').slideToggle(200);
$(this).next('div').slideToggle(200);

Никто, похоже, не работает. (Я добавил это в комментарии, но в нем нет подсветки кода.)

Answer 1

Ваше "a.expand-offer" находится внутри другого элемента абзаца, поэтому вам нужно попробовать подняться на один уровень вверх
попробуйте:

$(this).parent().next('div.offer-expander').slideToggle(200);

Answer 2

Да. Используйте $(this) для ссылки на элемент, по которому щелкнули, и перемещайтесь вот так ... Я не уверен, как будет работать третья строка (потому что я не вижу ваш источник), но я раскомментировал вторую строку, чтобы дать вам идея:

    $('a.expand-offer').click(function(event){
            event.preventDefault();
            $(this).next('div').slideToggle(200);
            //$('div.offer-expander').slideToggle(200);
    });