Collapsible dropdown menu - Set background for menu in active state?

Question

First, please take a look at this pen showing just the menu + the code (preview the menu here).

Coming to the point: In the navbar that you see, clicking on the "Channels" menu shows the menu item sliding out. The problem is, the menu's background doesn't represent its active state (i.e. #fff background and #222 color).

Setting the background-color when the mouse is hovered on the menu, is easy. But this one's tricky. I did try, :active selector to no avail. Any ideas?

SCREENSHOTS:

Answer 1

You could add a class to the li once the menu is open and remove it again.

BTW: :active works for the moment you click on it.

Answer 2

Since it appears as though using jQuery to add/remove a class is the only way to go, I went ahead with it. Here's the code I used.

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

The code finds the link element a one level down the element with .menu-item class (li in my case), and adds/removes class .selected to the link element.

Here's a fork of the original pen with the menu functioning the way I intended it to. You can preview the new and functioning menu here.

(Full credit to the code provided in this question. More info in the official jQuery documentation.)

UPDATE: You might find this answer extremely helpful (a better, simpler solution).

Example code:

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