Question

我想实现这个效果 - 当父div切换/向下滑动时，子div的子div也应该隐藏。

现在，我有一个父div，它会切换并显示子div。当我点击子div中的链接时，相关的子div将切换并显示。但是，现在如果我不再切换子div（隐藏它）但直接切换父div，则父div切换并隐藏子div。但是，孩子div的子孩子仍然显示而不是隐藏。

以下是代码：http://jsfiddle.net/fuz3d/LECWe/3/

如果单击“设置”，它将显示包含两个链接的子div - “创建相册”和“上传”。如果我点击创建相册，它将显示一个子子div。如果我现在单击“设置”，其子div将隐藏，但子子div仍会显示。

当父div隐藏其子div时，如何隐藏它？

我不希望子子在父div的点击上显示。

Answer 1

我添加了一行来完成这项工作：

$("span.reference a[id]").click(function() {
    $("#" + this.id.substr(1)).slideToggle(600)
    .siblings('.toggleDiv').slideUp(600);
    $(this).css('color' , '#F47A20');
    $("span.reference a[id]").not(this).css('color' , '#FFF');
    $(".toggleA").hide("normal"); //i added this line
});

这是你想要的吗？

Answer 2

只是一个FYI，你还需要修复“中间人”的颜色：（我会添加类和切换并删除颜色的类而不是直接，所以它全部在CSS而不是所有这些CSS的东西虽然）

$("span.reference a[id]").click(function() {
    $("#" + this.id.substr(1)).slideToggle(600).siblings('.toggleDiv').slideUp(600);
    $(this).css('color', '#F47A20');
    $("span.reference a[id]").not(this).css('color', '#FFF');
    $('.toggleA').hide(); // hide grand children
    $("#nav li a[id]").css('color', '#FFF'); // color children to original

});

$("#nav li a[id]").click(function() {
    $("#" + this.id.substr(1)).slideToggle(600).siblings('.toggleA').slideUp(600);
    $(this).css('color', '#000');
    $("span.reference a[id]").css('color', '#F47A20');
    $("#nav li a[id]").not(this).css('color', '#FFF');
});

在父div切换/ slideDown时隐藏子div的子div

2 个答案: