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

您应该在CSS中使用.content > div代替.content div。

它只会选择直接位于.content下的div，而不会选择.content

中的每个div

Answer 2

您必须只隐藏框div：

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

正如其他人所说，你必须使用css作为：

.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应用于div中的div box。这就是为什么你没有看到内容。