Управление родительским элементом на основе дочернего ввода: focus

Question

Управление родительским элементом на основе дочернего ввода: focus

0

У меня есть элемент <div> содержащий элемент <form> с полем <input>. Этот div также содержит <button> который скрыт через overflow: hidden.

иллюстрация

Когда пользователь нажимает на поле ввода, его высота изменяется, а переполнение: скрытое становится переполнением: видимым. Первый эффект, который я могу достичь с помощью ввода: фокус, но у меня проблема со вторым нацеливанием на родителя. Я понимаю, что селектор не может подняться в CSS3, поэтому я попытался использовать функцию jQuery has(), но он не работает (возможно, полностью моя ошибка).

Вот что я пробовал:

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

Я делаю это неправильно? Что я могу сделать для достижения желаемого эффекта?

user3444008 20 март 2014, в 23:12

Источник

0

$("input:focus").closest("div") не работает?
Michael Dunlap 20 март 2014, в 22:01

Теги:

javascript

jquery

css

2 ответа

0

Что вы можете сделать, так это попытаться получить доступ к родительскому элементу, используя родительский элемент 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() но хорошо знать другой способ.

vaz 20 март 2014, в 21:22

Ещё вопросы

Tarek · Accepted Answer · 2014-03-20T19-29-00.000Z

попробуй это:

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

Не работает для меня Я также пытаюсь нацелиться на родителя <div> - разве это не нацеливается на сам ввод?
Вы имеете в виду, что вам нужно сделать div как overflow: visible? проверьте мой ответ еще раз.