Question

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

这是我的代码：

<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%;
}

fiddle以查看行为。

Answer 1

我不知道你的css中有什么，但是如果你想让按钮保持与输入文本可见时相同的位置，那么你应该设置visibility：hidden，而不是将display属性设置为none。 http://www.w3schools.com/cssref/pr_class_visibility.asp

Answer 2

<强> jsFiddle demo

jQuery #first { margin: 0 auto; margin-top: 5%; text-align: center; } #second { margin: 0 auto; margin-top: 10%; text-align: center; }方法在toggle()属性上运行，当设置为display时，该属性基本上隐藏了文档流中的元素。

而是使用CSS display:none;隐藏/可见通过visibility方法访问它。

这是一个代码示例

.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"); });作为1/0 toggler

^ XOR

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

Answer 3

首先：在这里小提琴：Click

实时预览：

＆＃13;

$(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");
      $btn.removeClass("button-fixed");
    } else {
      $btn.text("Search");
      $btn.addClass("button-fixed");
    }
  })
})

＆＃13;

.button-fixed {
  margin-left: 286px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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>

＆＃13;

Answer 4

最简单的方法是在输入文本字段中添加div。像这样：

<div class="main-search-continer">
     <form action="/content/testing.html">
        <div style=" width: 350px; height: 15px; float: left;">
            <input class="inputSearch" style="width:100%" maxlength="2048" name="q" value="" />
        </div>
        <button type="button" class="js-btn-toggle_search">X Close</button>
     </form>
     <div class="clear"></div>
  </div>

确保新div的属性宽度为：350px;高度：15px的;和浮动：左; 。为了具有响应式设计，您应该始终考虑使用百分比作为宽度属性。

Answer 5

使用css的另一种方式......不完美，但你可以用它来获得你想要的结果。

.js-btn-toggle_search {
    position:absolute;
    top: 0.5em;
    left: 50%;
}

jsfiddle

即使输入被隐藏，也可以在输入文本旁边放置按钮？

5 个答案: