Jquery 点击事件未触发/区分两个相同的 HTML block

Question

Heres my page.

如果您找到红色的“特价”框，您会在单击其标题时看到它展开。页面底部还有另一个相同的框。如果你也点击那个，你就会看到我的问题。单击事件会触发两个框。这是一个疏忽。我的问题是我似乎无法让我的替代 JS 工作。我想我可以使用 next('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”类添加到标记中，但这很困惑，因为我希望能够以通用方式使用特价标记，而不添加唯一的类。

<小时/>

抱歉，这是我迄今为止尝试过的:

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