Question

在我的网站上，我有一个带有导航栏的全屏标题。两者都包含文本，图标等的组合，并显示在“主要内容”部分上方。我可以将类.p-X添加到#splash或#nav（X =页码，例如页面1（URL .p-1）的INDEX/page/1和{{1 }}（第2页（URL .p-2），以便在第1页上同时显示INDEX/page/2和#splash，但隐藏#nav并在第1页上仍显示#splash 2+页。最有效的方法是什么？ CSS和jQuery解决方案还可以。我已经尝试了可见性答案here和JJJ的选择器here（不过可能误用了后者）。谢谢！

编辑：当前接受的答案不允许我保留#nav上的弯曲边缘（#nav的图像和#splash的顶部边缘之间有空白）。我可以删除它，但是我想知道是否有一种方法可以保存它。

#nav

#splash {
    width: 100%;
    height: 100vh;
    background:#e00;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.icon {
    width: 128px;
    height: 128px;
    background: #ddd;
    margin: auto 0 0.5rem 0;
}

#splash .info {
    max-width: 700px;
    margin: 0 auto auto auto;
    background: #ddd;
}

#nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 40px;
    background: #000;
    color: #fff;
    z-index: 5;
    border-radius: 30% 30% 0% 0%; /* curved top if #splash is shown; curved bottom if not */
}

#content {
    height: 100vh;
    overflow-x: hidden:
    overflow-y: auto;
    background: #ccc;
}

Answer 1

隐藏父元素时，无法显示该元素的子元素。

请尝试将#nav移出#splash，使其不再是#nav的子级。然后，要获得相同的外观，请在标记中的#splash后面放置#nav并使用#nav { background-color: transparent }，以便可以看到其下面的主要内容，还可以使用#splash {height: calc(100vh - HEIGHTOF#NAV)}使#nav固定在底部

在JS中设置滚动位置规则，使其作用于#nav而不是#splash。

现在，您可以自由隐藏或显示#splash部分，而不会影响#nav

Answer 2

进行设置，以使#splash在默认情况下处于隐藏状态。然后，如果它在第一页上，则将#splash设为一个块元素。

#splash {
    display: none;
}
.p1 #splash {
    display: block;
}

隐藏父母，如果父母缺少特定班级，则显示孩子

2 个答案: