javascript - 即使输入被隐藏，也要在输入文本旁边放置按钮？

Question

我有一个搜索表单，我需要输入文本开始隐藏，并且有一个名为搜索的按钮，输入出现，当显示输入时，名为搜索的按钮转换为关闭按钮以再次隐藏输入文本。 我的问题是，当输入文本被隐藏时，按钮会移动到我网站的中心。我需要留在搜索框旁边。

这是我的代码:

<div class="main-search-continer">
     <form action="/content/testing.html">
        <input class="inputSearch" size="41" maxlength="2048" name="q" value="">        
        <button type="button" class="js-btn-toggle_search">X Close</button>
     </form>
     <div class="clear"></div>
</div>

JS:

$(document).on("click", "button.js-btn-toggle_search", function(){
    var $btn = $(this)
    $("input.inputSearch").toggle(0, '', function() {
        if($(this).is(":visible")) {
            $btn.text("X Close")
        } else {
            $btn.text("Search")
        }
    })
})

我的 CSS 非常简单:

input.inputSearch {
    font-size: 30px;
    width: 65%;
    margin: 0 auto;
    color: #939497;
    font-weight: 300;
    display:none;
}
div.main-search-continer {
    width: 100%;
}

A fiddle查看行为。

Answer 1

jsFiddle demo

jQuery toggle() 方法对 display 属性进行操作，当设置为 display:none; 时，基本上会隐藏您的元素文档流。

而是使用 CSS visibility hidden/visible 通过 .css() 方法访问它。

这是一个代码示例

$(document).on("click", "button.js-btn-toggle_search", function(){
    var $input = $("input.inputSearch");
    var tog = $input.css("visibility") === "visible";
    $input.css({visibility: tog ? "hidden" : "visible"});
    $(this).text(tog ? "Search" : "X Close");
});

或者也使用 ^ XOR 作为 1/0 toggler

$(document).on("click", "button.js-btn-toggle_search", function(){
    var tog = this.tog^=1;   // 1/0 Toggler // or use this.dataset.tog^=1;
    $("input.inputSearch").css({visibility: tog?"hidden":"visible"});
    $(this).text(tog?"Search":"X Close");
});

http://www.w3.org/wiki/CSS/Properties/visibility https://developer.mozilla.org/en/docs/Web/CSS/visibility