Question

可怕的头衔，但我无法命名我的问题。

我正在尝试制作几个盒子，只需点击一下按钮即可.slideToggle()并显示一堆信息。我的问题是每个盒子都应该有自己的按钮，因为正如它现在编码的那样，无论我点击什么按钮，其中只有一个描述会扩展和折叠。

我编写了以下jQuery代码：

$(document).ready(function() {
    $('#sponsor-description').hide();

    $('#sponsor .expand').click(function() {
         $('#sponsor-description').slideToggle('slow');
    });
});

您可以在网站上自行试用（点击橙色的“展开”按钮）：http://dacc.fredrixdesign.com/sponsors/。

如何点击其中一个“展开”按钮，相应的说明会向下滑动？我想$(this)可能在某种程度上有所帮助，但我不确定。谢谢！

Answer 1

＃sponsor-description是一个id。你真的在滥用id。它们必须对每个元素都是唯一的。我建议使用一个唯一的id或使用更好的css类选择器。

现在您使用赞助商描述作为每个描述元素的ID，这就是您的代码失败的原因。

我不知道Wordpress，但如果你可以将所有这些id属性改为类，那么你将是金色的。假设您可以更改它们，您的代码将是：

$('.sponsor .expand').click(function() {
     $(this).parents('.sponsor').children('.sponsor-description').slideToggle('slow');
});

如何使用.slideToggle更具体？

1 个答案: