Javascript 用于更改嵌套子菜单的CSS不工作的函数（jQuery）

我正在尝试为一个移动网站创建一个滑入菜单，它有嵌套的子菜单，也可以滑入主父菜单。这是通过编辑

right

style属性将每个菜单移出屏幕和在屏幕上移动来完成的

一切都正常工作，除了打开一个子菜单后，应该关闭子菜单的函数正在更改CSS。包含此指令的函数本身正在执行（由console.log证明），但编辑CSS的行不起作用

以下是有问题的函数：

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

有趣的是，如果我尝试编辑

背景色

或

左侧

的CSS，它会工作。但是

右侧

将不起作用

我尝试过使用

addClass

和

removeClass

，直接引用父类的类名，而不是使用

this

，以及内联函数调用，但似乎都不起作用。我认为这要么是一个范围问题，要么是对父菜单的干扰。不管怎样，我都没办法弄明白

下面是我在JSFIDLE中遇到的问题的一个简单示例：

JQuery是可以接受的。

您的

$（“.slide menu sub-parent”）。单击关闭按钮时，单击功能仍在启动

将关闭功能更新为：

$('.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);
}

.
您的
$（'.slide menu sub-parent'）。单击关闭按钮时，单击
功能仍在启动

将关闭功能更新为：

$('.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);
}

.
它是绝对/相对定位的？它们都是固定位置。由于它是一个菜单，理想情况下，它将处于固定位置，直到它关闭。它是绝对/相对位置？它们都是固定位置。因为它是一个菜单，理想情况下，它会在一个固定的位置，直到它被关闭。我的英雄。这很有效。但有一个问题，stopPropagation到底停止了什么？函数本身告诉它离开屏幕，那么该函数的传播不会让它离开屏幕吗？为什么
$（'.slide menu sub-parent'）。单击
函数启动？我不是在按那个使它着火的div吗？我对此有点困惑。当您单击“关闭”按钮时，您的鼠标事件会慢慢进入DOM，触发注册到该元素的父级/祖先级的所有事件（在本例中包括打开它的子菜单事件）。从技术上讲，单击“上一步”会触发
span
事件，但由于事件冒泡，它仍会按预期触发关闭事件，即使它已在span的父级上注册
stopPropagation
只是告诉jQuery不要继续向上移动DOM到元素的父级，这会阻止您的子菜单用自己的
“right”，0
设置覆盖
“right”、-425
指令。我的英雄。这很有效。但有一个问题，stopPropagation到底停止了什么？函数本身告诉它离开屏幕，那么该函数的传播不会让它离开屏幕吗？为什么
$（'.slide menu sub-parent'）。单击
函数启动？我不是在按那个使它着火的div吗？我对此有点困惑。当您单击“关闭”按钮时，您的鼠标事件会慢慢进入DOM，触发注册到该元素的父级/祖先级的所有事件（在本例中包括打开它的子菜单事件）。从技术上讲，单击“上一步”会触发
span
事件，但由于事件冒泡，它仍会按预期触发关闭事件，即使它已在span的父级上注册
StopperPagation
只是告诉jQuery不要继续向上移动DOM到元素的父级，这会阻止子菜单使用其自己的
“right”，0
设置覆盖
“right”、-425
指令。