Question

我有一个<div>元素，其中包含<form>元素和<input>字段。此div还包含一个<button>，它通过溢出隐藏：隐藏。

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

这就是我的尝试：

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

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

Answer 1

试试这个：

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

Answer 2

您可以尝试使用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()方法，但知道另一种方式很好。

根据子输入控制父元素：焦点

2 个答案: