Jquery搜索框
Jquery搜索框
提问于 2015-06-23 22:27:30
我正在尝试创建一个响应性的Jquery搜索框。我想做的事：
- 当窗口变小时，DIV应该会崩溃，搜索字段应该会消失。
- 折叠时，DIV应该展开，只要单击DIV，搜索字段就会出现。DIV应该再次崩溃，搜索字段在单击或单击其他任何地方时会消失。
我创建了一个JSFiddle：http://jsfiddle.net/270krg8c/7/
HTML：
<div id="pagewrap">
<div id="user4">
<div class="search">
<form action="/" method="post" class="form-inline">
<label for="mod-search-searchword" class="element-invisible" aria- invalid="false"></label>
<input name="searchword" id="mod-search-searchword" maxlength="200" class="inputbox search-query" type="search" size="20" placeholder="Zoeken...">
<input type="hidden" name="task" value="search">
<input type="hidden" name="option" value="com_search">
<input type="hidden" name="Itemid" value="144">
</form>
</div>
</div>CSS：
#pagewrap {
width: 500px;
}
.search {
box-shadow: 5px 5px 10px -1px #ccc, -5px 5px 10px -1px #ccc;
background-color: #AEAEAE;
border-color: #959595;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-bottom-right-radius: 6px;
-moz-border-bottom-left-radius: 6px;
border-style: none solid solid solid;
border-width: 1px;
width: 244px;
height: 45px;
float: right;
position: relative;
transition: width 0.5s;
background-image: url("http://s8.postimg.org/94l8aqeld/search_Button.gif");
background-repeat: no-repeat;
background-position: right top;
}
input[type="search"] {
border-radius: 0px !important;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
width: 160px;
height: 16px;
margin: 9px 0px 9px 9px;
}
@media screen and (max-width: 500px) {
#pagewrap {
width: 95%;
}
.search {
width: 45px;
}
.search.clicked {
width: 244px;
}
input[type="search"] {
display: none !important;
overflow: hidden !important;
}
.search.clicked > input[type="search"] {
display: initial;
width: 160px;
};
}Jquery：
$('.search').on('click', function() {
$(this).toggleClass('clicked');
});有两件事我不能去工作：
- 当单击DIV时，搜索字段不会出现。
- 我是Jquery的新手，在其他地方点击DIV时，我找不到一个很好的脚本来折叠DIV。
我希望有人能帮我。谢谢!
回答 1
Stack Overflow用户
发布于 2015-06-23 23:35:29
您的问题不是jQuery，而是CSS。
- 将所有与搜索相关的内容移到样式表的其余部分下面。有些样式表会导致这个CSS出现问题。这是级联样式表的级联部分。
- 在媒体查询更改中：
.search.clicked >inputtype=“搜索”{
至
.search.clicked inputtype=“搜索”{
因为
>只选择.search.clicked的直接子级。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31014578
复制相关文章
相似问题
腾讯云开发者
