Question

我正在尝试创建一个响应式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的好脚本。

我希望有人可以帮助我。谢谢！

Answer 1

你的问题不是jQuery，而是CSS。

将所有与搜索相关的内容移到样式表的其余部分下方。一些样式表导致此CSS出现问题。这是cascading style sheets。
在您的媒体查询更改中：
```
.search.clicked > input[type="search"]{
```
到
```
.search.clicked input[type="search"]{
```
因为>仅选择.search.clicked的直接子女。

Jquery搜索框

1 个答案: