Elemente zu kontrollieren, wenn andere mit CSS

Question

Ich habe diese Klasse für mein Menü angezeigt: .site-header-menu

und ich habe diese Klasse für meine Inhalte: .content

was soll ich tun .content zu fangen, wenn .site-header-menu angezeigt wird?

ich dies bereits versucht, aber es funktioniert nicht:

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

Haben Sie einen Vorschlag? Diese Art von Dingen sind mit CSS möglich?

Ich benutze Wordpress, also ist dies meine php struture in header.php. Die Idee ist, den Inhalt meiner Seite Vorlage zu verstecken, wenn site-header-menu ist offen:

<?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

Wie wird .site-header-menu angezeigt? Wird eine Klasse hinzugefügt, um das Menü anzuzeigen, oder wird die Anzeigeeigenschaft von JavaScript direkt manipuliert? Es gibt keinen Hinweis, wie Sie feststellen können, ob das Menü angezeigt wird.

.site-header-menu + .content { Opazität: 0; }

Die obige Regel wegen der Pluszeichen, gelten nur, wenn das Element mit Klasse content sofort das Element mit der Klasse wird wie folgt site-header-menu im DOM. Zum Beispiel:

Dies könnte das Problem sein, aber ohne tatsächlich die Ausgabe HTML zu sehen, ist es schwer zu sagen.

Wenn Sie PHP oder JS verwenden, um die Sichtbarkeit des Menüs umzuschalten, können Sie möglicherweise eine zusätzliche Klasse zu .content hinzufügen/entfernen, die sie basierend auf dem angezeigten Menü ein-/ausblenden.

/* 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"); 
    } 
} 

Wenn Sie Ihre HTML-Ausgabe veröffentlichen könnten, oder eine Geige eingerichtet für uns einen Blick zu nehmen, wäre es hilfreich sein.