将 CSS :active 转换为 Javascript .onclick

Question

我想将 :active css 从 Javascript 转换为 onclick。 这个想法很简单，我想点击glyphicon并显示内容。

如果我可以在弹出窗口中显示内容，那就太神奇了！

这是我的 html 部分：

<td class="col-md-1"><span class="glyphicon glyphicon-blackboard cover-icon"></span>
    <div class="coverPDF">
        {% if document.format == 'pdf' %}
           // some things with html + javascript
        {% endif %}
    </div>
</td>

还有 CSS 部分：

div.coverPDF {
    display: none;
}

span.cover-icon:active + div.coverPDF {
    display: block;
}

通过这种方式，当我点击我的字形图标时，它会显示内容，直到我取消点击这个。

如何只单击一次并显示/隐藏内容？在弹出窗口中？

也许是这样的？

<script>
$(document).ready(function(){
    $(".cover-icon").click(function(){
        $(".coverPDF").hide();
    });
    $(".cover-icon").click(function(){
        $(".coverPDF").show();
    });
});
</script>

Answer 1

也许你应该使用 JS(Jquery) 而不是 CSS。

$(".cover-icon").click(()=>{ $(".coverPDF").fadeToggle(300);}

你可以试试这个并告诉我！