Question

我想从Javascript将:active CSS转换为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;
}

通过这种方式，当我单击我的glyphicon时，它会显示内容，直到我取消单击它为止。

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

也许有这样的东西？

<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);}

您能尝试一下并让我知道吗！

将CSS：active转换为Javascript .onclick

1 个答案: