Javascript 在隐藏了部分div之后

我的一个同事用angularjs创建了一个模板。它由可关闭的菜单组成。这是通过简单的jQuery实现的。但是，单击关闭按钮后，菜单div的下部仍保留。如果移动鼠标，它将消失。我无法在js小提琴中重现错误。为什么零件仍然存在，如何修复

HTML

JS

---

首先，您使用的是angularjs，不能像在标准网站上一样使用jQuery。 你有这个JS：

$('body').on('click', '.close', function(){
    $(this).closest('.menu').addClass('hide'); 
});

但在执行该脚本的那个一刻，并没有呈现到页面的HTML，所以该脚本是usless

您需要创建一个自定义指令才能使其正常工作

.directive('ngHideCustom', function () {
    return function (scope, elm, attrs) {
        $('.close', elm).click(function () {
            $(this).parent().hide();
        });
    }
})

您需要更改html以调用此指令

<div class="menu" ng-hide-custom>
   <button class="close"> X close this </button>
</div>

---

这样，只有当HTML的这一部分呈现到页面时，脚本才会应用。

为什么不使用隐藏功能？不确定它在这里是否有任何效果，但决不要对委派事件使用“正文”。改用文档。车身的造型可能会导致事件无法触发，特别是单击是否可以包括导致问题的零件？正如你所说的，这是一件好事。AngularJS的全部目的就是通过声明性数据绑定从HTML中抽象出逻辑。如果这是使用AngularJS构建的，那么您应该真正使用该指令来反对.show和.hide。如果NGSET不起作用，请考虑创建自定义指令来完成此任务。@ NSnLy我尝试隐藏，两者都创建了ErrReRe:没有HTML呈现给页面，这是否意味着如果他们为委派的事件处理程序使用了文档，那么它会起作用吗？因为文档当时确实存在，并且它是一个委托处理程序。

$('body').on('click', '.close', function(){
    $(this).closest('.menu').addClass('hide'); 
});

.directive('ngHideCustom', function () {
    return function (scope, elm, attrs) {
        $('.close', elm).click(function () {
            $(this).parent().hide();
        });
    }
})

<div class="menu" ng-hide-custom>
   <button class="close"> X close this </button>
</div>