2017-08-19 7 views
1

Alles außer der eigentlichen Funktion, das div zu verbergen, funktioniert. Der Grund, warum ich das ohne JavaScript brauche, ist, dass es keine JavaScript-Warnung ist, die versteckt werden kann. Ich benutze CSS, um zu versuchen, die Anzeige des Divs auf keine zu setzen, aber ich scheine es nicht richtig zu machen.Hide div, wenn das Kontrollkästchen ohne JavaScript aktiviert ist

HTML

<noscript> 
    <div class="jswarning"> 
     JavaScript is disabled. For the best experience, enable it. 
     <label class="jswarningbutton" for="hidejswarning">Hide</label> 
     <input id="hidejswarning" type="checkbox"> 
    </div> 
</noscript> 

CSS

.jswarning { 
    box-sizing: border-box; 
    padding: 5px; 
    background:red; 
    width:100%; 
    color:white; 
    text-align:center; 
} 

.jswarningbutton { 
    background: white; 
    color: red; 
    cursor: pointer; 
} 

.jswarningbutton + input { 
    display: none; 
} 

.jswarningbutton + input[type=checkbox]:checked ~ .jswarning { 
    display: none; 
} 
+0

Mann, benutze einfach JS dafür, wirklich. Zeige die no JS Nachricht auf eine der anderen Arten an, das ist hack und nicht gut, sieh dir die Antwort an, der "hide" Text bleibt dort egal ob die Box aktiviert ist oder nicht, das ist nur hässlich, sorry – ptts

Antwort

0

Sie verwenden das ~ CSS falsch Selektor.

Der ~ Selektor sollte als p ~ ul verwendet werden. Dies bedeutet, dass dieses CSS für jede ul, der vorangestellt ist, angewendet wird. Sie finden den Referenzschalter unter here.

2

Der ~ CSS-Selektor wird als General Sibling Selector bezeichnet. Es wählt Geschwister des vorhergehenden Selektors aus.

.jswarning { 
 
box-sizing: border-box; 
 
padding: 5px; 
 
background:red; 
 
width:100%; 
 
color:white; 
 
text-align:center; 
 
} 
 

 
.jswarningbutton { 
 
background: white; 
 
color: red; 
 
cursor: pointer; 
 
} 
 

 
.jswarningbutton + input { 
 
display: none; 
 
} 
 

 
.jswarningbutton + input[type=checkbox]:checked ~ .jswarning{ 
 
display: none; 
 
}
<label class="jswarningbutton" for="hidejswarning">Hide</label> 
 
<input id="hidejswarning" type="checkbox"> 
 
<div class="jswarning"> 
 
    JavaScript is disabled. For the best experience, enable it. 
 
</div>

+0

würde es ist möglich, die label + checkbox "button" innerhalb der div zu haben, die versteckt werden muss? – XantiuM

+2

gibt es keinen Elternselektor in css. Sie können das div einfügen, aber dann gibt es keine Möglichkeit, das div auszuwählen und es zu verstecken. – Dij

0

Da diese angeblich unmöglich mit CSS ist (Stand August 2017), habe ich es geschafft, es mit PHP Cookies zu tun. Wenn jemand interessiert ist, ist dies der Code, den ich verwendet habe (es gibt wahrscheinlich eine bessere Art und Weise):

Hauptseite (index.php)

<?php 
    if(!isset($_COOKIE['hidejswarning'])){ 
     setcookie('hidejswarning', '0', time()+3600, '/'); 
     header('Location: index.php'); 
    } 
?> 

<!DOCTYPE html> 
<html> 
    <body> 
     <?php 
      if ($_COOKIE["hidejswarning"] != '1') { 
       echo " 
     <noscript> 
      <div class='jswarning'> 
       JavaScript is disabled. For the best experience, enable it. <a href='hidejswarning.php'>Hide</a> 
      </div> 
     </noscript> 
       "; 
      } 
     ?> 
    </body> 
</html> 

Seite, die das Cookie (hidejswarning setzt. php)

<?php 
    setcookie('hidejswarning', '1', time()+3600, '/'); 
    header('Location: index.php'); 
?> 
<html><body>Please wait...</body></html> 
0

1) Das, was Sie Bedarf zu sein ein Geschwister des Eingangs versteckt sind, nicht ein Elternteil. Es gibt keinen übergeordneten Selektor. Einfache Lösung.

2) Es muss nach dem Eingabe-Tag im HTML sein. Es gibt keinen vorhergehenden Geschwisterselektor. Schwierige Lösung für Ihr gegebenes Aussehen. Sie benötigen eine unordentliche Positionierung, um eine Nachricht zu erhalten, die hinter dem Kontrollkästchen im HTML-Code steht.

3) Diese Interaktion muss jedoch nicht optisch ein Kontrollkästchen sein. Verstecken Sie das Kontrollkästchen Eingabe-Tag (mit einer Anzeige: keine), klicken Sie auf das Label schaltet immer noch Checkbox-Zustand. Fügen Sie die Nachricht nach dem Eingabe-Tag in ein div/span innerhalb des Labels ein. Jetzt können Sie den ~ Selektor verwenden, um die Nachricht auszublenden. Vielleicht style das Wort "verstecken", so dass es buttonish aussieht.

Verwandte Themen