个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我试图通过单击搜索图标，使用 css 将隐藏的搜索栏从 div 的中心扩展到 div 的两侧。但它总是向左或向右扩展到一侧。我需要同时过渡到双方。我需要没有 javascript 或 jquery 的纯 css 解决方案。我尝试了动画、过渡、定位所有内容，但没有找到任何解决方案。我该如何解决这个问题。
$(document).ready(function(){
$('.search-label').on("click",function(e){
$(".form-groups").addClass("move");
$("#for-grp").addClass("search-open");
$("#for-grp").removeClass("box-visible");
$(".close-label").removeClass("d-block");
});
});.main
{
position:relative;
width: 50%;
background-color: aliceblue;
}
.form-groups{
width: 0%;
transition: width 1s;
}
.pull-right
{
float: right;
}
.search-label
{
position: absolute;
top: 0;
}
.sibling
{
clear: right;
}
#for-grp
{
width: 90%;
display: block;
margin-left:25px;
height: 20px;
}
.box-visible
{
visibility:hidden;
}
.move
{
width:100%;
}
.search-open
{
border: none !important;
border-bottom: 1px solid grey !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.close-label
{
position:absolute;
right:0px;
}
.d-block
{
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="main">
<div class="form-groups pull-right" style="display:inline" id="search">
<span class="search-label bg-white">
<i class="fa fa-search icon_search"></i>
</span>
<input type="text" placeholder="Search" id="for-grp" class="box-visible">
</div>
<span class="close-label d-block"><i class="fa fa-close"></i></span>
</div>
</body>
</html>最佳答案
它没有风格，但也许这就是您要找的
$(document).ready(function(){
$('i.fa-search').on("click",function(e){
$('.holder').addClass('open');
});
});.main
{
position:relative;
width: 100%;
margin: auto;
background-color: aliceblue;
}
input {
width: 0%;
display: none;
}
i.fa {
position: absolute;
top: 0;
}
i.fa-search {
left: 0;
}
i.fa-close {
right: 0;
display: none;
}
.holder {
position: relative;
margin: auto;
width: 0%;
transition: width 1s;
}
.holder.open {
width: 50%;
}
.holder.open input {
width: 100%;
display: block;
}
.holder.open i.fa-close {
display: block;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="main">
<div class="holder">
<input placeholder="Search" type="text">
<i class="fa fa-search"></i>
<i class="fa fa-close"></i>
</div>
</div>
</body>
</html>关于javascript - 如何通过过渡将搜索栏从中心扩展到两侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50129264/
25
4
0
我设法检查一个整数是否是从右到左排序的，但我如何检查从左到右的顺序？也许我应该做 2 个功能，一个从左到右检查，另一个从右到左检查？例如，我将 return 0; 替换为第二个函数，该函数检查它是否从
我想在两侧“剪切”我的页面，如下所示: http://i.stack.imgur.com/ngZrp.jpg 演示:https://jsfiddle.net/r2g0eyxf/3/ #left {
我很难在页面的两边都获得背景: 风格 .left { background: url(wax.png); width: 15%; position: absolute; lef
我需要逐步证明:7 + O(n) = O(n) 当两边都有大O的时候，我不知道该怎么做。 我想我理解大 O 符号的概念，但为什么两边都有大 O？ 最佳答案 这种表示法的使用不符合大 O 表示法的正式定
我的目标是使 slider 宽度为 1280 像素并位于页面中央。我希望内容的边缘在两侧都有隐藏的溢出。例如，我希望内容的中心始终位于页面的中心，随着浏览器的大小调整，每一边都被切断，并且没有出现水平
我在做什么:在悬停按钮时，我添加了一个 5px 的底部边框。 JS fiddle : http://jsfiddle.net/mUCNB/ 问题: 问题是边框底部在左侧和右侧都延伸了 1px。 问题:
我是一名优秀的程序员,十分优秀！