Question

选中此复选框后，导航面板应出现，并且未选中，则应将其隐藏。问题是我用CSS Grid布局设置了标题栏，所以我不知道如何使底部的行消失。

我唯一知道的是，有一个:checked伪选择器用于复选框和单选按钮等。我只需要在选中该复选框时使第二行消失。

     @import url('https://fonts.googleapis.com/css?family=Rubik:900|Rajdhani|Quicksand');
    
    /* Global */
    
    html > * {
    	font-family: Quicksand;
    }
    
    body {
    	margin: 0;
    	padding: 0;
    }
    
    header {
    	background: #414a4c;
    }
    
    /* ID's */
    #navbar {
    	list-style-type: none;
    }
    
    #navbar li {
    	display: inline;
    	padding-left: 35px;
    }
    
    #navbar a {
    	text-decoration: none;
    	color: white;
    
    }
    
    #navbar-toggle:checked {
    
    }
    
    /* Classes */
    
    .title-grid {
    	display: grid;
    	grid-template-columns: 2fr 1fr 1fr 1fr;
    	grid-template-rows: 1fr 1fr;
    	grid-template-areas: 
    		"text . . clock"
    		"nav nav . .";
    	width: 100%;
    	grid-row-gap: 5vh;
    }
    
    .title-grid #navbar-toggle,
    .title-grid label {
    	grid-area: text;
    	left: 0;
    	margin-left: 25px;
    	
    }
    
    .title-grid #titletext {
    	grid-area: text;
    	position: absolute;
    	left: 150px;
    }
    
    .title-grid nav {
    	grid-area: nav;
    }
    
    .title-grid #clock {
    	grid-area: clock;
    	font-family: Rajdhani, Arial, Helvetica, sans-serif;
    	font-size: 30px;
    	position: absolute;
    	top: 0;
    	right: 0;
    	margin-top: 10px;
    	margin-right: 10px;
    }
    
    /* Keyframes */

        <header>
    
            <div class="title-grid">
                <span id="clock"></span>
                <input type="checkbox" name="navbar-toggle" id="navbar-toggle">
                <label for="navbar-toggle">
                    <i>
                        <img src="resources/img/menu-toggle.svg" height="35px" width="35px" alt="Menu Toggle">
                    </i>
                </label>
                <div id="titletext">
                    <h1>
                        50-0 Protocol &copy;
                    </h1>
                </div>
                <nav>
                    <ul id="navbar">
                        <li><a href="Index.html" class="active">Students</a></li>
                        <li><a href="">Teachers</a></li>
                    </ul>
                </nav>
            </div>
        </header>

Answer 1

添加这些样式

#navbar-toggle~nav {
  display: none;
}

#navbar-toggle:checked~nav {
  display: block;
}

@import url('https://fonts.googleapis.com/css?family=Rubik:900|Rajdhani|Quicksand');

/* Global */

html>* {
  font-family: Quicksand;
}

body {
  margin: 0;
  padding: 0;
}

header {
  background: #414a4c;
}


/* ID's */

#navbar {
  list-style-type: none;
}

#navbar li {
  display: inline;
  padding-left: 35px;
}

#navbar a {
  text-decoration: none;
  color: white;
}

#navbar-toggle~nav {
  display: none;
}

#navbar-toggle:checked~nav {
  display: block;
}


/* Classes */

.title-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "text . . clock" "nav nav . .";
  width: 100%;
  grid-row-gap: 5vh;
}

.title-grid #navbar-toggle,
.title-grid label {
  grid-area: text;
  left: 0;
  margin-left: 25px;
}

.title-grid #titletext {
  grid-area: text;
  position: absolute;
  left: 150px;
}

.title-grid nav {
  grid-area: nav;
}

.title-grid #clock {
  grid-area: clock;
  font-family: Rajdhani, Arial, Helvetica, sans-serif;
  font-size: 30px;
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 10px;
  margin-right: 10px;
}


/* Keyframes */

<!DOCTYPE html>
<link rel="stylesheet" href="resources/css/main.css">
<script src="resources/js/script.js"></script>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>50-0 Protocol </title>
</head>

<body>
  <header>

    <div class="title-grid">
      <span id="clock"></span>
      <input type="checkbox" name="navbar-toggle" id="navbar-toggle">
      <label for="navbar-toggle">
                <i>
                    <img src="resources/img/menu-toggle.svg" height="35px" width="35px" alt="Menu Toggle">
                </i>
            </label>
      <div id="titletext">
        <h1>
          50-0 Protocol &copy;
        </h1>
      </div>
      <nav>
        <ul id="navbar">
          <li><a href="Index.html" class="active">Students</a></li>
          <li><a href="">Teachers</a></li>
        </ul>
      </nav>
    </div>
  </header>
</body>

</html>

选中复选框后，如何折叠CSS网格行？

1 个答案: