css - 点击后出现的 Div(仅限 CSS3)

Question

我需要创建一个图标，在点击它后显示一个 div(菜单)。 CSS3 有可能吗？ 这是针对移动版本的，我不需要 :hover 解决方案。

附言:如果唯一的解决方案是使用 Javascript 来实现，那么也可以链接到某些内容。

CSS

.nav{
    color: black;
    background-color:white;
    height: 5vh;
    width: 100vw;
}

.menu{
    color: black;
    background-color:green;
    height: 90vh;
    width: 90vw;
}

HTML

<div class="nav">
    <!-- Font Awesome Icon -->
    <i class="fa fa-bars"></i>
</div>

Answer 1

有几种不同的方法可以做到这一点，我相信它们都不是万无一失的，这里有一个使用 :focus 方法的例子。 http://fiddle.jshell.net/rpwe4kzy/4/

CSS

.hide{display: none;}
button:focus ~ .hide{ display: block;}

HTML

<div>
  <button tabindex="0">Show text</button>
  <p class="hide">Hidden type</p>
</div>

更多解决方案参见此处，https://tympanus.net/codrops/2012/12/17/css-click-events/

否则，如果您想使用 JS，我建议您使用一个简单的 jquery 函数。我猜你的元素中已经有 jquery，否则只需将它替换为 vanilla javascript 函数即可。

CSS

<style>
    .hidden{ display: none;}
</style>

HTML

<div>
    <button class="click-me">Click me</button>
    <p class="show-me hidden">
        Here is some text!
    </p>
</div>

JavaScript

<script>
    $( document ).ready(function() {
        $('.click-me').on('click', function(){
            $('.show-me').show();
        });
    });
</script>

这是 jQuery 方式的一个工作示例，https://jsfiddle.net/clintongreen/bu22op77/