Question

Heres my page.

如果您找到红色的“特别优惠”框，则会在单击其标题时看到它展开。页面底部还有另一个相同的框。如果你也点击那个，你会看到我的问题。 click事件触发了两个框。这是一种疏忽。我的问题是我似乎无法让我的替代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”类添加到标记中，但这很麻烦，因为我希望能够以通用方式使用特别优惠标记，而无需添加唯一类。

对不起，这是我到目前为止所尝试的：

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

似乎无效。（我把它放在评论中，但缺少代码突出显示。）

Answer 1

烨。使用$(this)来引用被点击的元素并像这样移动..我不确定第三行是如何工作的（因为我看不到你的来源）但是我已经取消注释第二行给出你有个主意：

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

Answer 2

您的“a.expand-offer”位于另一个段落元素中，因此您需要尝试升级一级尝试：

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

Jquery单击事件不会触发/区分两个相同的HTML块

2 个答案: