即使隐藏输入，也要在输入文本旁边放置按钮？答案

【问题标题】：Place button next to input text even if the input is hidden?即使隐藏输入，也要在输入文本旁边放置按钮？
【发布时间】：2015-10-30 04:52:16
【问题描述】：

我有一个搜索表单，我需要输入文本开始隐藏，并使用名为 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 可以查看行为。

【问题讨论】：

你能提供你的css吗？
简单的方法是将不透明度设置为0而不是隐藏它，这样它会被隐藏但仍然占用页面空间。
CSS: .main-search-continer{width: 390px;} .js-btn-toggle_search{float:right;} 是一种选择。
正如我提到的使用可见性。 “即使是不可见元素也会占用页面空间。使用 display 属性创建不占用空间的不可见元素！”

标签： javascript jquery html css opacity

【解决方案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 切换器

$(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

【讨论】：

好电话，我没注意到！
太棒了！谢谢！这工作得很好。你能给我解释一下var tog = this.tog^=1;这行吗？
@Phoenix_uy this 是被点击的 HTMLElement 对象，.tog 只是我们为存储 0/1 值而动态创建的一些虚拟属性。要切换 0/1 值，您可以使用 ^ (Bitwise XOR) 作为 I/O 切换器 stackoverflow.com/a/22061240/383904
@Phoenix_uy 一个更有效的方法是使用data-* 属性：var tog = this.dataset.tog ^= 1; 选择你最喜欢的 ;)
@Phoenix_uy 正如我所说的那样，在 CSS 中设置 .main-search-continer 到 position: absolute（作为覆盖）。另外在 jQuery 中将行更改为：$input.css({visibility: tog ? "hidden" : "visible", position:tog?"absolute":"relative"});

【解决方案2】：

我不知道您的 CSS 中有什么，但如果您希望按钮保持在与输入文本可见时相同的位置，那么您应该设置可见性：隐藏，而不是将显示属性设置为无。 http://www.w3schools.com/cssref/pr_class_visibility.asp

【讨论】：

他希望按钮在同一个地方，即使文本字段不可见；）@Gacci
这正是可见性属性设置为 none 的作用。
"即使是不可见元素也会占用页面空间。使用 display 属性创建不占用空间的不可见元素！" -w3schools.com/cssref/pr_class_visibility.asp

【解决方案3】：

首先：在这里提琴：Click

实时预览：

$(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");
    }
  })
})

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

<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>

【讨论】：

【解决方案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 具有属性 width: 350px;高度：15px；和浮动：左； .为了实现响应式设计，您应该始终考虑使用百分比作为宽度属性。

【讨论】：

【解决方案5】：

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

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

jsfiddle

【讨论】：