Question

我有一个纯CSS下拉菜单，当用户点击菜单中的项目时，我想关闭它。

请将浏览器的大小调整为768像素以下，因为这是显示下拉列表的时间。

这是我的代码：

<div class="nav">
    <input type="checkbox" id="toggle" />
    <label for="toggle" class="toggle" onclick></label>
    <ul class="menu">
        <li><a href="#">Creative Services</a></li>
        <li><a href="#">Updates</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
</div><!-- End of Navigation -->

这是我的css

@media only screen and (max-width: 768px){
.menu { display: none; opacity: 0; width: 100%; position: absolute; right: 0; }
.menu > li { display: block; width: 100%; margin: 0; }
.menu > li > a { display: block; width: 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.toggle { display: block; position: relative; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#toggle:checked ~ .menu { display: block; opacity: 1;}
}
.toggle:after {
content: '☰';
display: block;
width: 100px;
margin: 33px 0;
padding: 10px 50px;
text-align: center;
font-size: 20px;
color: blue;
box-sizing: border-box; 
}

.toggle:hover:after{    
color: red;
}

.toggle:active:after{   
color: blue;
}   
#toggle:checked + .toggle:after{
content: '☰';
}
}

Answer 1

好的，用jquery（我在你的页面上看到你已经有了这个）来做这个...：

$(function () {
    $('.menu').find('a').on('click', closeNav);
});
function closeNav() {
    jQuery("#toggle").attr('checked', false);
}

单击关闭CSS菜单

1 个答案: