由于父元素的顶部和位置，子元素单击不起作用

Child element click is not working due to top and position of parent element

本文关键字：元素 单击 位置 不起作用 于父 顶部      更新时间：2023-09-26

我想在单击"关闭"子div时关闭父div。

<div class="siblings"/>
<div class="parent">
    <div class="child" ng-click="handleClick()">Close</div>
    <div>Content</div>
</div>
.parent {
    position: relative;
    top: 10px;
}
.child {
    float: right;
}
.siblings {
    position: fixed;
    height: 66px;
}

我不能使用指针事件：在我的父母身上没有，因为它包含链接和其他可点击的数据。此外，我兄弟姐妹的身高与我孩子的身高重叠。

提前谢谢。

由于您使用的是JQuery:，所以我会这么做

$(".child").click(function(){
    $(this).parent().slideToggle();
});

这是JSFiddle演示

我不能使用指针事件：在我的父级上没有，因为它包含链接和其他可点击的数据。

若在父级中使用pointer-events: none，则子级div将不会收到点击事件。此外，pointer-events: none将不允许任何点击，但也不会关闭父分区。

此外，我兄弟姐妹的身高与我孩子的身高重叠。

这是因为混合了position风格。在一个地方使用position: relative;，在另一个地方则使用position: fixed;。如果您想这样做，请选择两者的父对象，其样式将控制这些div之间的自然行为和结合。

当我点击"关闭"子div时，我想关闭父div。

<div class="parent" ng-if="!hideParent">
    <div class="child" ng-click="hideParent = true">Close</div>
    <div>Content</div>
</div>

您确定使用的是Angular吗？

然后尝试如下你可以使用ng if或ng show。

<div class="parent" ng-if="!obj.hideParent">
    <div class="child" ng-click="obj.hideParent=true">Close</div>
    <div>Content</div>
</div>

这里有两个原因是因为ng if不起作用。

  1. 一个是，如果我们没有在范围中声明它，这将不会反映出来
  2. 或者hideParent属性值可能是字符串。所以，如果它在字符串中，那么这将不会被认为是false或null

你可以用两种不同的方法来解决这个问题。

  1. 在控制器中，在视图中访问它之前，先在作用域变量中声明它，而不是动态变量

$scope.obj=｛hidePParent:null｝；

并在按钮/div上点击

  1. 在控制器中声明一个作用域函数并访问那里的变量
$scope.HideParent= function (obj){
    if(!obj){
obj.hideParent=true;
}
else{
$scope.obj={hideParent:true};
}
}

这里不要忘记将对象发送到函数。如果你发送属性，显然这不会反映在视图中。

相关文章：