将 CSS :active 转换为 Javascript .onclick

Posted 2023-05-07

【中文标题】将 CSS :active 转换为 Javascript .onclick

【英文标题】：Convert CSS :active to Javascript .onclick

【发布时间】：2019-03-02 06:54:21

【问题描述】：

我想将 :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>

【问题讨论】：

您是否对“弹出窗口”进行过研究？互联网上有数千篇关于这样做的文章。否则，此问题与Using JQuery to toggle div visibility

重复

Using JQuery to toggle div visibility的可能重复

【参考方案1】：

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

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

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

【讨论】：

$('.cover-icon').on('click', '.coverPDF', function() $(".coverPDF")..toggle();)跨度>