Question

我的菜单有{@ 1}}

我的内容为.site-header-menu

在显示.content时，我该怎么做才能抓住.content？

我已经尝试了这个但是它不起作用：

.site-header-menu

你有什么建议吗？使用css可以做到这种事情吗？

我使用的是Wordpress，所以这是我在header.php中的php结构。我的想法是在.site-header-menu + .content{ opacity: 0; }打开时隐藏我的页面模板的内容：

site-header-menu

Answer 1

.site-header-menu如何显示？是否添加了一个类来显示菜单，或者它的显示属性是否由JavaScript直接操作？没有迹象表明如何判断菜单是否显示？

.site-header-menu + .content { 不透明度：0; }

由于加号，上述规则仅适用于具有类content的元素紧跟DOM中具有类site-header-menu的元素的情况。例如：

<div class="site-header-menu">
     ... menu stuff ...
</div>

<div class="content">
     ... content stuff ...
</div>

这可能是问题，但实际上没有看到输出HTML很难说。

如果您使用PHP或JS来切换菜单的可见性，您可以添加/删除一个额外的类到.content，它将根据显示的菜单隐藏/显示它。

/* CSS rule to hide the .content element */
.content.hideMe {
     visibility: none;
}

// pseudo-script click event handler (NOT REAL SCRIPT!)
function menuButtonClick() {
     if (menuCurrentlyDisplayed) {
          // menu is already displayed so hide it and show content
          hideMenu;
          removeClass(".content", "hideMe");
     } else {
          // menu is not yet displayed so show it and hide content
          showMenu;
          addClass(".content", "hideMe");
     }
}

如果您可以发布输出HTML，或者为我们设置一个小提琴来查看，那将会很有帮助。

使用css显示其他元素时捕获元素

1 个答案: