css - 可折叠下拉菜单 - 为处于活动状态的菜单设置背景？

Question

首先，请看一下这只显示菜单+代码的笔（在此处预览菜单）。

切入要点：在您看到的导航栏中，单击“频道”菜单会显示菜单项滑出。问题是，菜单的背景并不代表它的活动状态（即#fff背景和#222颜色）。

当鼠标悬停在菜单上时设置背景颜色很容易。但这个很棘手。我确实尝试过，:active选择器无济于事。有任何想法吗？

截图：

Answer 1

因为似乎使用 jQuery 添加/删除类是唯一的方法，所以我继续使用它。这是我使用的代码。

jQuery(document).ready(function($){
  $('.menu-item > a').click(function(){
    $(this).toggleClass('selected');
  });
});

该代码在a具有.menu-item类（li在我的情况下）的元素的下一级找到链接元素，并将类添加/删除.selected到链接元素。

这是原始笔的一个叉子，菜单按我的意图运行。您可以在此处预览新的功能菜单。

（完全归功于此问题中提供的代码。官方 jQuery 文档中的更多信息。）

更新：您可能会发现这个答案非常有帮助（更好、更简单的解决方案）。

示例代码：

jQuery(document).ready(function($){
    $('.collapse').on('show hide', function () {
        $(this).siblings("a").toggleClass('selected'); 
    });
});

Answer 2

菜单打开后，您可以向 li 添加一个类，然后再次将其删除。

顺便说一句：:active在您单击它的那一刻起作用。