Question

对此有一个很好的解决方法，不少文章，但我无法理解它们。任何帮助表示赞赏。

当我点击'slide-toggle'时，我需要'slickbox'来扩展，但只有'slide'中的'slickbox'实例（即页面上有多个slickbox元素）。

我试图用它来表示它应该只扩展相关的div，但到目前为止还没有工作。谢谢:)）

我的HTML：

<div class="slide">
  <a class="slick-toggle" href="#">Toggle the box</a>
  <div class="slickbox">
  <p>Hello</p>
  </div>
</div>

我的jquery：

$('a.slick-toggle').click(function() {
$('.slickbox',this).slideToggle(400);
return false;
});

Answer 1

See Working Example

您可以像这样使用next()：

$('a.slick-toggle').click(function() {
  $(this).next('.slickbox').slideToggle(400);
  return false;
});

next()为您提供了点击相关链接的slickbox类的下一个元素。这样，它始终slideToggle相关div，其类为slickbox。

Answer 2

使用以下行：

$('.slickbox',this).slideToggle(400);

您在范围.slickbox

中搜索a.slick-toggle类的元素

您需要做的是从第二个参数中删除this关键字，因此您的代码应如下所示：

$('a.slick-toggle').click(function(){
    $('.slickbox').slideToggle(400);
    return false;
});

直播示例：http://jsfiddle.net/nwuWd/

我在一个apge上有几个entite并且你想匹配最接近的，如上所述你可以使用next（）方法，如下所示：

$('a.slick-toggle').click(function(){
    $(this).next('.slickbox').slideToggle(400);
    return false;
});

Answer 3

如果您将.slickbox选择器更改为.slide .slickbox，则它应仅适用于“幻灯片”中的“slickbox”。但是，您似乎在这里使用类作为ID - 这是您想要的吗？也就是说，您是否希望此代码在页面上应用于此类多个项目？如果只有一个“幻灯片”，您可能应该“滑动”ID。然后选择器将变为#slide .slickbox

从元素中获取唯一ID

3 个答案:

See Working Example