jquery - CSS 右过渡问题

Question

我找到了一段用于创建扩展搜索栏的代码。它依赖 CSS 和 javascript 来运行。演示found here ，搜索栏向右打开。我已将其向右浮动并希望其在左侧打开。此时我只需要另一双眼睛，因为我找不到我的问题。问题是它打开得很好，但没有转换。然而，它会在关闭时发生转变。

这是:http://jsfiddle.net/rEsQ2/1/

HTML

<div class="fix" id="search-bar">
    <div class="search_main fix">
        <form action="http://logans.linkhousedev.net/" method="get" class="searchform" role="search" id="search">
            <div id="label" class="">
                <label id="search-label" for="search-terms">search</label>
            </div>
            <div id="input" class="">
                <input type="search" title="Search for:" name="s" value="" placeholder="Search …" class="search-field" id="search-terms" />
            </div>
        </form>
    </div>
</div>

CSS

#search-bar {
    top: 0;
    height: 60px;
    position: absolute;
    right: 0;
}
#search {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
}
#label {
    width: 60px;
    height: 60px;
    position: relative;
    z-index: 20;
}
#label label {
    display: block;
    width: 60px;
    height: 60px;
    background: url("http://callmenick.com/lab-demos/3-expanding-search-bar/img/search.png") 0 0;
    font-size: 0;
    color: rgba(0, 0, 0, 0);
    text-indent: -9999px;
    cursor: pointer;
}
#label label:hover {
    background: url("http://callmenick.com/lab-demos/3-expanding-search-bar/img/search.png") -60px 0
}
#label.active label {
    background: url("http://callmenick.com/lab-demos/3-expanding-search-bar/img/search.png") -60px 0
}
#input {
    height: 60px;
    overflow: hidden;
    position: absolute;
    right: 60px;
    top: 0;
    width: 450px;
    z-index: 5;
}
#input input {
    display: block;
    position: absolute;
    top: 0;
    right: -450px;
    width: 430px;
    height: 100%;
    margin: 0;
    padding: 0 10px;
    border: none;
    background-color: #23688b;
    color: #fff;
    font-size: 18px;
    backface-visibility: none;
    border-radius: 0;
    transition: right 0.3s ease 0s;
}
#input input:focus {
    outline: none
}
#input.focus {
    z-index: 20
}
#input.focus input {
    right: 0;
    transition: right 0.3s ease 0.2s;
}

JS

// get vars
var searchEl = $("#input");
var labelEl = $("#label");
// register clicks and toggle classes
labelEl.on("click", function () {
    if (searchEl.hasClass("focus")) {
        searchEl.removeClass("focus");
        labelEl.removeClass("active");
    } else {
        searchEl.addClass("focus");
        labelEl.addClass("active");
    }
});
// register clicks outisde search box, and toggle correct classes
$(document).on("click", function (e) {
    var el = $(e.target);
    if (el.attr("id") != "search-terms" && el.attr("id") != "search-label") {
        if (searchEl.hasClass("focus")) {
            searchEl.removeClass("focus");
            labelEl.removeClass("active");
        }
    }
});

如有任何想法，我们将不胜感激。

干杯，杰伊

Answer 1

您为较大的搜索栏输入了错误的 ID。这就是你看到的样子:

<input type="search" title="Search for:" name="s" value="" placeholder="Search …" class="search-field" id="search-terms" />

将 ID 从“search-terms”更改为“search”:

<input type="search" title="Search for:" name="s" value="" placeholder="Search …" class="search-field" id="search" />

当我在 jsfiddle 上这样做时，它完美地工作了。