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

Question

首先，请take a look at this pen只显示菜单+代码（preview the menu here）。

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

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

截图：

Answer 1

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

BTW：:active适用于您点击它的那一刻。

Answer 2

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

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

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

Here's a fork的original pen，菜单按照我的预期方式运行。您可以预览新功能菜单here。

（完全归功于code provided in this question。official jQuery documentation中的更多信息。）

更新：您可能会发现this answer非常有用（更好，更简单的解决方案）。

示例代码：

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