Javascript 基于子输入控制父元素：焦点

我有一个

元素，其中包含一个带有

字段的

元素。此div还包含一个通过overflow:hidden隐藏的

当用户单击输入字段时，其高度将发生变化，溢出：隐藏将变为溢出：可见。我可以通过输入实现的第一个效果是：专注，但第二个效果是针对家长的。我知道选择器在CSS3中不能提升，所以我尝试使用jQuery has（）函数，但它似乎不起作用（可能完全是我的错）

这就是我所尝试的：

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

$（“div:has（input:focus）”）.addClass（“可见”）；

我做得不对吗？我该怎么做才能达到预期效果？

试试以下方法：

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

---

您可以使用jQuery

parent（）

您还可以尝试使用

closest（）

方法

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

---

就我个人而言，我更喜欢

nestest（）

方法，但最好知道另一种方法。

$（“输入：焦点”）。nestest（“div”）

不起作用？对我不起作用。我还试图以父对象为目标——这不只是以输入本身为目标吗？您的意思是需要将div设置为overflow:visible？再次检查我的答案。

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