JavaScript 淡入/淡出仅适用于 div，而不适用于其子项

Question

我做了一个js脚本，它隐藏/显示页面上的元素，但它只显示带有id的div，而不会显示该div中的其他div。

我的css ：

.content {
    position: relative;
}
.content div {
     display: none;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
}

我的js：

$(".link").click(function(e) {
    e.preventDefault();
    $('.content div').fadeOut('slow');
    $('#' + $(this).data('rel')).fadeIn('slow');
});

Answer 1

您必须仅隐藏框div：

$(".link").click(function(e) {
    e.preventDefault();
    $('.content div.box').fadeOut('slow');
    $('#' + $(this).data('rel')).fadeIn('slow');
});

正如其他人所说，您必须将 CSS 用作：

.content > div {}

Answer 2

你应该在CSS中使用.content > div而不是.content div。

它将只选择 .content 正下方的div，而不是 .content 中的每个div

Answer 3

令人困惑的问题，但我明白了。

将这个 CSS 选择器用于嵌套的div：

.content > div {

Answer 4

为了防止这种行为，最好使用一些类或id而不是标签作为div

我认为最简单的解决方案是更改 css

从

.content div {
 display: none;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
}

自

.content .box{
     display: none;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
}

js 将是下一个：

$(".link").click(function(e) {
e.preventDefault();
$('.content .box').fadeOut('slow');
$('#' + $(this).data('rel')).fadeIn('slow');
});

---

如果您查看开发控制台，您会发现该脚本没有fadeOut应用于具有类 box 的div 内部div。所以这就是为什么你没有看到内容。