Question

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

HTML

<div class="menu">
   <button class="close"> X close this </button>
</div>

CSS

.menu{
    width: 100px;
    height: 200px;
    padding: 20px;
    background: lightgrey;
}

.hide{
    display: none;
}

JS

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

/// also does not work
$('body').on('click', '.close', function(){
    $(this).closest('.menu').hide(); 
});

Answer 1

首先，您使用的是angularjs，并且您无法在标准网站上使用jQuery。你有这个JS：

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

但是在执行此脚本的那一刻，没有HTML呈现到页面，所以这个脚本是无用的。

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

.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呈现为页面时，才会应用您的脚本。

隐藏部分div后仍然存在

1 个答案: