我有一个使用 CSS 动画显示搜索查询的示例代码。
我想知道,如何在展开搜索查询时隐藏“标题”类,并在搜索查询最小化时再次显示它?
这是两种状态的示例图片(如您所见,“标题”在搜索文本后面可见,这是我不想要的):
我知道在 jquery 中我可以像这样隐藏它(再次显示它我不知道逻辑会怎样):
$("p").hide();
但是我怎样才能只用 CSS 来实现呢?
该代码段正在运行,但显示不正确,但我不知道为什么。
$('.opener').click(function() {
$(this).parent('.search').toggleClass('inactive').find('input').focus();
});
.row {
border: 1px solid red;
}
.title {
font-size: 16px;
font-weight: bold;
position: absolute;
margin: 6px 0;
}
.input-group {
display: flex;
height: 36px;
width: 100%;
overflow: hidden;
padding: 0;
/*background-color: rgba(100, 100, 100, .1);*/
cursor: pointer;
/*border-radius: 2px;*/
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
}
.input-group:active,
.input-group:hover {
/*background-color: rgba(100, 100, 100, .1);*/
}
.input-group.centered {
margin: 0 auto;
}
.input-group .input-group-addon {
justify-content: center;
width: 36px;
background: transparent;
border: none;
display: flex;
text-align: center;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.input-group .input-group-addon i {
height: 24px;
width: 24px;
align-self: center;
color: #777;
}
.input-group input {
font-family: "Roboto", sans-serif;
background: transparent;
border: none;
box-shadow: none !important;
font-size: 16px;
padding: 0;
}
.inactive {
width: 36px;
border-radius: 18px;
background: transparent;
box-shadow: none;
}
.inactive .input-group-addon:not(:first-child) {
opacity: 0;
}
.row {
margin-top: 1em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300|Material+Icons' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container">
<div class="row text-center">
<h1>Search Inputs</h1>
</div>
<div class="row">
<div class="title">Title</div>
<div class="input-group search inactive pull-right">
<span class="input-group-addon opener">
<i class="material-icons">search</i>
</span>
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon opener">
<i class="material-icons">clear</i>
</span>
</div>
</div>
</div>
最佳答案
您可以使用 siblings选择 div.title
。
添加另一个带有 display:none 属性的类并切换该类
$("p").hide();
$('.opener').click(function() {
$(this).parent('.search').toggleClass('inactive').find('input').focus();
$(this).parent('.search').siblings('div.title').toggleClass('hideTitle')
});
.row {
border: 1px solid red;
}
.title {
font-size: 16px;
font-weight: bold;
position: absolute;
margin: 6px 0;
}
.input-group {
display: flex;
height: 36px;
width: 100%;
overflow: hidden;
padding: 0;
/*background-color: rgba(100, 100, 100, .1);*/
cursor: pointer;
/*border-radius: 2px;*/
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
}
.input-group:active,
.input-group:hover {
/*background-color: rgba(100, 100, 100, .1);*/
}
.input-group.centered {
margin: 0 auto;
}
.input-group .input-group-addon {
justify-content: center;
width: 36px;
background: transparent;
border: none;
display: flex;
text-align: center;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.input-group .input-group-addon i {
height: 24px;
width: 24px;
align-self: center;
color: #777;
}
.input-group input {
font-family: "Roboto", sans-serif;
background: transparent;
border: none;
box-shadow: none !important;
font-size: 16px;
padding: 0;
}
.inactive {
width: 36px;
border-radius: 18px;
background: transparent;
box-shadow: none;
}
.inactive .input-group-addon:not(:first-child) {
opacity: 0;
}
.row {
margin-top: 1em;
}
.hideTitle{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300|Material+Icons' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container">
<div class="row text-center">
<h1>Search Inputs</h1>
</div>
<div class="row">
<div class="title titleDiv">Title</div>
<div class="input-group search inactive pull-right">
<span class="input-group-addon opener">
<i class="material-icons">search</i>
</span>
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon opener">
<i class="material-icons">clear</i>
</span>
</div>
</div>
</div>
关于javascript - 输入展开时隐藏标题,输入最小化时显示标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47150767/