Javascript 使用jquery切换显示子项

当点击“相册1”链接时，我想在隐藏和显示照片之间切换。然而，现在它什么也没做。我试图在控制台中调试它，但它没有输出任何有用的东西

script.js

$(document).ready(function() {
    // album click toggle
    $('.album a').click(function() {
        console.log($(this).parent().find(".photos"));
        $(this).parent().find(".photo").hide();
    });
});

---

index.html

<div class="album">
            <h2><a href="#">Album 1</a></h2>
            <ul class="photos">
                <li>
                    <img src="img/img1.jpg">
                    <span class="info"><span>Image 1</span></span>
                </li>
                <li>
                    <img src="img/img2.jpg">
                    <span class="info"><span>Image 2</span></span>
                </li>
                <li>
                    <img src="img/img3.jpg">
                    <span class="info"><span>Image 3</span></span>
                </li>
            </ul>
        </div>

图1


图2


图3

您的$（this）.parent（）参考h2

是“.photos”不是“.photo”

$(document).ready(function() {
        // album click toggle
        $('.album a').click(function() {
            console.log($(this).parent().parent().find(".photos"));
            $(this).parent().parent().find(".photos").hide();
        });
    });

或

---

您的目标是

.photo

，而不是

.photos

除此之外，您实际上可以切换，如：

jQuery（函数（$）{
//相册点击切换
$（'.album a'）。单击（函数（e）{
e、 preventDefault（）；//防止浏览器滚动到顶部
$（this）.最近的（“.album”）.find（“.photos”）.stop（）.slideToggle（）；
});
});
*{边距：0；框大小：边框框；}
.album ul{显示：无；列表样式：无；填充：0；边距：0；溢出：自动；}
.album li{显示：内联块；垂直对齐：顶部；}
.album li>*{display:block；}



图1


图2


图3




图1


图2


图3


在
.find（“.photo”）
和实际正确的类
.find（.photos”）
$(document).ready(function() {
            // album click toggle
            $('.album a').click(function() {
                console.log($(this).parents().find(".photos"));
                $(this).parents().find(".photos").hide();
            });
        });