时间戳

首页 > 解决方案 > 如何在绝对位置上全屏显示输入字段

html - 如何在绝对位置上全屏显示输入字段

问题描述

在标题中我有搜索字段，它应该有相同的虱子容器。

我需要如何做出更大的输入，例如：

[![在此处输入图像描述][1]][1]

我的代码jsFiddle

$(".search-input").on("mousedown", function () {
    $(this).addClass('active');
    $('.search_container').addClass('test')
});

$(".cancel-icon").on("mousedown", function () {
    $('#search-content').hide();
    $('.search-input').removeClass('active');
    $('.search-input').val('');
    $('.search_container').removeClass('test')
});

出于某种原因，输入不想变大-_-

标签： htmljquerycss

解决方案

再创建一类你的名字。我只是在输入处于活动状态时调用它，.some并在单击时将其删除。div.search-fieldcancel-icon

.some{
  flex-shrink: 0;
  width: 100%;
  transition: width 1s;
}

.search-field{
  ...
  width: 50%;
  ...
}

$(".search-input").on("mousedown", function () {
    ...
    $('.search-field').addClass('some');
});

$(".cancel-icon").on("mousedown", function () {
    ...
    $('.search-field').removeClass('some');
});

display: flex使.search-field收缩。为了避免我添加flex-shrink: 0

更新 添加transition: width 1s了动画宽度并向现有.search-field样式添加了额外样式，这不会改变现有大小，但会在过渡时产生影响。width: 50%.search-field

推荐阅读