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

【问题标题】：Collapsible dropdown menu - Set background for menu in active state?可折叠下拉菜单 - 为处于活动状态的菜单设置背景？
【发布时间】：2012-12-15 14:57:26
【问题描述】：

首先，请take a look at this pen 仅显示菜单 + 代码 (preview the menu here)。

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

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

屏幕截图：

【问题讨论】：

您可能需要向 click 事件添加 javascript 以使用您想要的活动样式切换类。

标签： css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

original pen 中的Here's a fork，菜单按我的预期运行。您可以预览新的功能菜单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'); 
    });
});

【讨论】：