Question

我需要创建一个图标，单击它后显示div（菜单）。 CSS3有可能吗？这适用于移动版，我不需要：悬停解决方案。

PS：如果唯一的解决方案是使用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/

点击后显示的Div（仅限CSS3）

1 个答案: