为什么我的：active或者：checked选择器不工作？

Question

我在我的网站上有一个隐藏的侧边栏菜单，如果我在我的桌面上打开我的网站，我隐藏的侧边栏宽度为100px（不完整），因此为了揭示它，您必须将其悬停在其上。如果我在移动设备上打开我的网站，我的隐藏边栏没有宽度，我必须点击按钮才能显示边栏。

HTML：

<div id="mySidenav" class="sidenav sidenav-wrapper"> 
    <img class="logo1" src="../img/logo1.png"><br><br> 
    <a href="#">Home</a> 
    <a href="#">About</a> 
    <a href="#">Contact</a> 
</div> 
<div id="contoh" class="content-section-b"> 
    <div class="mobiletoggle"> 
    <label class="fa fa-bars" for="showblock"></label> 
    <input type="checkbox" id="showblock" /> 
    </div> 
</div> 

在上面的代码我用checkbox改变 '点击'，因为我只想用CSS。

CSS：

.sidenav { 
    height: 100%; 
    width: 100px; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: #111; 
    overflow-x: hidden; 
    padding-top: 60px; 
    transition: 0.8s; 
} 
.logo1 { 
    height: 10%; 
    width: auto; 
    padding-left: 20px; 
    transition: 0.8s; 
} 
.sidenav:hover { 
    width: 250px; 
    transition: 0.8s; 
} 
.sidenav:hover ~ #contoh { 
    background-color: rgba(0,0,0,0.4); 
    filter: grayscale(100%); 
} 
.sidenav:hover .logo1 { 
    height: auto; 
    width: 95%; 
    padding-left: 10px; 
    transition: 0.8s; 
} 
.sidenav a { 
    float:left; 
    width:100%; 
    padding: 8px 8px 8px 32px; 
    text-decoration: none; 
    font-size: 20px; 
    color: #818181; 
    display: block; 
    opacity: 0; 
    transition: opacity 1300ms 
} 
.sidenav a:hover, .offcanvas a:focus { 
    color: #f1f1f1; 
    background-color:#5fa2db; 
    font-size: 30px; 
} 
#showblock { 
    display: none; 
} 
@media screen and (min-width:768px) { 
    .mobiletoggle { 
    display:none; 
    } 
} 
@media screen and (max-width:767px) { 
    .sidenav { 
    width:0px; 
    } 
    #showblock:checked + .sidenav { 
    width: 250px; 
    transition: 0.8s; 
    } 
} 

在上面我用:checked的代码，如果我用:active它只是有一点点不同。问题是为什么我的:checked/:active不起作用？我看着这jsFiddle，它工作正常，所以为什么我不能使用它？有什么建议么？

Answer 1

根据您的CSS，修改你的HTML：

<input type="checkbox" id="showblock"> 
<div id="mySidenav" class="sidenav sidenav-wrapper"> 
    <img class="logo1" src="../img/logo1.png"><br><br> 
    <a href="#">Home</a> 
    <a href="#">About</a> 
    <a href="#">Contact</a> 
</div> 
<div id ="contoh" class="content-section-b"> 
    <div class="mobiletoggle"> 
    <label class="fa fa-bars" for="showblock"></label> 
    </div> 
</div> 

的input#showblock应该是div#mySidenav为了你的CSS工作上面。

#showblock:checked + .sidenav { 
    width: 250px; 
    transition: 0.8s; 
}