基于子元素输入控制父元素:focus

Controlling parent element based on child input:focus

本文关键字：元素 focus 控制 输入      更新时间：2023-09-26

我有一个<div>元素包含一个<form>元素和一个<input>字段。这个div还包含一个<button>，通过overflow:hidden隐藏。

插图

当用户点击输入字段时，它的高度将改变，溢出:隐藏将变成溢出:可见。我可以通过输入实现的第一个效果是:专注，但第二个目标是针对父母，我有问题。我知道选择器不能在CSS3中提升，所以我尝试使用jQuery has()函数，但它似乎不起作用(可能完全是我的错)。

这是我尝试过的:

<script>
  $("div:has(input:focus)").addClass("visible");
</script>

我做错了吗?我该怎么做才能达到预期的效果?

try this: 

$("input").focus(function(){
  $(this).parents('div').css({"overflow":"visible" });
});

你可以尝试使用jQuery parent()

访问父元素
var input = $('input');
input.on('focus', function(e) {
    var form = input.parent();
    var div = form.parent()[0];
    // Do your css customization here
});

你也可以尝试使用closest()方法

var input = $('input');
input.on('focus', function(e) {
    var div = input.closest('div');
    // Do your css customization here
});

我个人更喜欢closest()方法，但知道另一种方法也很好。

相关文章：