使用jQuery将DOM元素保存到变量中

Question

I have a side-menu-bar with some dropdown-lists. When i click on a list's child element, the menu closes. When i click again on the menu, i want that dropdown list to be expanded. In this way, i thought that it will be alright to save the DOM element into a global variable, and expand it on onClick menu event.

That list contains li and ul elements, to expand that, i'll add a .css class named "open".

The menu items didn't have any id-s to identify them.

How can i do this?

globally {var selectedItem =null}



   // If user click any menu link
    $('.menu-layer a').on('click', function () {
   //--> selectedItem = getClickedElement
   //... other code
 }


  //If user clicks the hamburger menu
    listenForMenuLayer: function () {
    $('.nav-menu').on('click', function () {
   //--> selectedClick.addClass('open')
    //animation and other stuff code
     }}

Thanks

Answer 1

You can try something like this, not saving it as a global variable but just listening for the click event to fire like this, I'd also suggest adding at least on id on the parent of it all so it's easier to target.

$( "#menu" ).on( "click", function() {
    $( "#menu" ).addClass( "open" )
});