Question

我正在尝试重新创建类似于此网站http://www.iamjamesmcgill.com/上的投资组合部分，当您点击图片时，它会滑动打开隐藏的div并在其中显示内容。查看内容后，单击要关闭的x，然后向上滑动。我玩过jsfiddle上的toggle函数（如果需要可以提供链接）但似乎无法复制上面的代码。任何帮助将不胜感激！

Answer 1

希望是正确的

jQuery(document).ready(function () {
    jQuery(".content").hide();
    //toggle the componenet with class msg_body
    jQuery(".portfolio-item").click(function () {
        jQuery(".content").slideToggle(100);
    });
});

http://jsfiddle.net/La2m53ch/2/

Answer 2

您只在函数中使用next()。 jQuery网站描述：

获取该组中每个元素的紧随其后的兄弟匹配的元素。如果提供了选择器，它将检索下一个选择器仅当它与该选择器匹配时才是兄弟姐妹。

查看您的层次结构，您会注意到.content不是兄弟姐妹。因此，您首先需要进入层次结构，然后查找.content。您可以使用parents()完成此操作。

（旁注：parent()函数只会在层次结构中上升一级，因此我们在您的函数中使用parents()。）

jQuery(document).ready(function () {
    jQuery(".content").hide();
    //toggle the componenet with class msg_body
    jQuery(".portfolio-item").click(function () {
        jQuery(this).parents().next(".content").slideToggle(100);
    });
});

Updated Fiddle

Answer 3

http://jsfiddle.net/La2m53ch/1/

jQuery(document).ready(function () {
    jQuery(".content").hide();
    //toggle the componenet with class msg_body
    jQuery(".portfolio-item").click(function (e) {
    $(this).parent().find(".content").slideToggle(100);
    });
});

检查小提琴你还需要更改标记。

切换隐藏的div

3 个答案: