Function to change CSS of nested submenu not working (jQuery)

Question

I'm attempting to create a slide-in menu for a mobile website which has nested submenus that also slide in over the primary parent menu. This is done by editing the right style attribute to move each menu off & on screen.

Everything is working properly except that once I open a submenu, the function that's supposed to close the submenu is changing the CSS. The function that contains this instruction itself is executing (as evidenced by a console.log), but the line that edits the CSS is not working.

Here is the function that is having trouble:

$(document).ready(function(){
  $('.close-sub-menu').click(function(){
      $(this).parent().css("right", "-425px");
      console.log("this line is logging correctly");
  });
});

Interestingly enough, if I attempt to edit the CSS of background-color or left , it will work. But right will not work.

I've tried using addClass and removeClass instead, referencing the parent's class name directly instead of using this , and inline function calls, but none of it has seemed to work. I think it is either a scoping issue, or perhaps some interference with the parent menu. Either way, I'm not able to figure it out.

Here is a simple example of my problem in a JSFiddle: https://jsfiddle.net/wk4wwfer/2/

JQuery is very acceptable.

Answer 1

Your $('.slide-menu-sub-parent').click function is still firing when you click the close button.

Update your close function to be:

$('.close-sub-menu').click(function(e){
    e.stopPropagation(); //Prevents the click event from bubbling up and triggering the other click events registered
    $(this).parent().css("right", -425);
}

Fiddle solution .