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

Question

我的菜单有这个类:.site-header-menu

我的内容有这个类:.content

当显示 .site-header-menu 时，我应该怎么做才能捕获 .content？

我已经试过了，但它不起作用:

.site-header-menu + .content{
  opacity: 0;
}

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

我使用的是 Wordpress，所以这是我在 header.php 中的 php 结构。这个想法是在 site-header-menu 打开时隐藏我的页面模板的内容:

<?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?>
                    <!--<button id="menu-toggle" class="menu-toggle"><?php _e( 'Menu', 'twentysixteen' ); ?></button>-->
                    <button id="menu-toggle" class="menu-toggle" data-title="<?php the_title(); ?>"><?php the_title(); ?></button>


                    <div id="site-header-menu" class="site-header-menu">
                        <?php if ( has_nav_menu( 'primary' ) ) : ?>
                            <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>" data-title= ''>

                                <?php
                                    wp_nav_menu( array(
                                        'theme_location' => 'primary',
                                        'menu_class'     => 'primary-menu',
                                     ) );
                                ?>

                            </nav><!-- .main-navigation -->
                        <?php endif; ?>

Answer 1

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

.site-header-menu + .content{ opacity: 0; }

上面的规则，因为加号，只有当 content 类的元素紧跟在 site-header-menu 类的元素之后才适用DOM。例如:

<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，或者设置一个 fiddle 供我们查看，那将会很有帮助。