功能改变嵌套子菜单的CSS不工作（jQuery）

我正在尝试创建一个移动网站的滑入菜单，其中嵌套子菜单也滑过主父菜单。这是通过编辑right样式属性来完成的，将屏幕上的每个菜单关闭&。功能改变嵌套子菜单的CSS不工作（jQuery）

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

这里是有问题的功能：

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

有趣的是，如果我尝试编辑的background-color或left的CSS，它会奏效。但right将无法正常工作。

我使用addClass和removeClass相反，引用父类名，而不是直接使用this试过了，内联函数调用，但没有它似乎工作。我认为这是一个范围界定问题，或者是对父菜单的干扰。无论哪种方式，我都无法弄清楚。

这是我在的jsfiddle问题的一个简单的例子：https://jsfiddle.net/wk4wwfer/2/

jQuery是非常可以接受的。

来源

2017-03-27 user1925805

这是绝对/相对位置？ – TsundereBug

他们都是固定位置。由于它是一个菜单，理想情况下它将处于固定位置，直到关闭。 – user1925805

当您单击关闭按钮时，$('.slide-menu-sub-parent').click函数仍在触发。

更新您贴心的功能是：

$('.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。

来源

2017-03-27 22:48:33 Drewby

我的英雄。这工作完美。但问题是，stopPropagation究竟停止了什么？该函数本身告诉它离开屏幕，因此该函数的传播不会让它离开屏幕？为什么'$（'。slide-menu-sub-parent'）。click'函数触发？我没有点击使它启动的div？我对此有点困惑。 – user1925805

当你点击关闭按钮时，你的鼠标事件向上滑动DOM，以关闭注册到该元素的父/祖（在这种情况下包括打开它的子菜单事件）的任何事件。技术上，点击“span”事件上的后退触发器，但是由于事件冒泡，它仍然会按照预期触发您的关闭事件，即使它已注册在跨度的父级上。 'stopPropagation'只是简单地告诉jQuery不要继续到元素的父节点，这会阻止你的子菜单用自己的“right”，“0”设置覆盖“right”，“-425”指令。 – Drewby

功能改变嵌套子菜单的CSS不工作（jQuery）

回答

相关问题