Javascript 即使输入是隐藏的，是否将按钮放在输入文本旁边？

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

这是我的代码：

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

我的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查看行为。

首先：在此处拉小提琴：

现场预览：

$（文档）。在（“单击”，“按钮.js-btn-toggle_search”，函数（）{
变量$btn=$（此）
$（“input.inputSearch”）。切换（0'，函数（）{
如果（$（this）.is（“：可见”））{
$btn.text（“X结束”）；
$btn.removeClass（“按钮固定”）；
}否则{
$btn.text（“搜索”）；
$btn.addClass（“按钮固定”）；
}
})
})

。按钮已修复{
左边距：286px；
}

X接近

首先：在这里拉小提琴：

现场预览：

$（文档）。在（“单击”，“按钮.js-btn-toggle_search”，函数（）{
变量$btn=$（此）
$（“input.inputSearch”）。切换（0'，函数（）{
如果（$（this）.is（“：可见”））{
$btn.text（“X结束”）；
$btn.removeClass（“按钮固定”）；
}否则{
$btn.text（“搜索”）；
$btn.addClass（“按钮固定”）；
}
})
})

。按钮已修复{
左边距：286px；
}

X接近

我不知道css中有什么内容，但如果希望按钮保持在与输入文本可见时相同的位置，则不应将“显示”属性设置为“无”，而应将“可见性：隐藏”

我不知道css中有什么内容，但如果希望按钮保持在与输入文本可见时相同的位置，则不应将“显示”属性设置为“无”，而应将“可见性：隐藏”

最简单的方法是在输入文本字段周围放置一个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>

X接近

---

确保新div具有属性width:350px；高度：15px；和float:left。为了有一个响应的设计，你应该总是考虑使用宽度属性的百分比。

< P>最简单的方法是把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>

X接近

确保新div具有属性width:350px；高度：15px；和float:left。为了有一个响应的设计，你应该总是考虑使用宽度属性的百分比。

< P> <强> < /强>

jQuery

toggle（）

方法在

display

属性上运行，当设置为

display:none时基本上隐藏了文档流中的元素

而是使用CSS
可见性
隐藏/可见通过
.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");
});



jQuery
toggle（）
方法在
display
属性上运行，当设置为
display:none时基本上隐藏了文档流中的元素

而是使用CSS
可见性
隐藏/可见通过
.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");
});


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

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

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

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

你能提供你的css吗？简单的方法是将不透明度设置为0，而不是隐藏它，这样它将被隐藏，但仍会占用页面空间。css:
。主搜索continer{width:390px；}。js-btn-toggle_search{float:right；}
是一个选项。正如我提到的，使用可见性。“甚至不可见元素也会占用页面空间。使用“显示”属性可以创建不占用空间的不可见元素！”您可以提供css吗？简单的方法是将不透明度设置为0，而不是将其隐藏，这样它将被隐藏，但仍会占用页面空间。css:
.main search continer{width:390px；}.js-btn-toggle\u search{float:right；}
是一个选项。正如我提到的，使用可见性。“即使不可见的元素也会占用页面上的空间。使用display属性创建不占用空间的不可见元素！”他希望按钮位于同一位置，即使文本字段不可见；）@gacci这正是visibility属性设置为none所能实现的。“即使不可见元素也会占用页面空间。使用display属性创建不占用空间的不可见元素！”-他希望按钮位于同一位置，即使文本字段不可见；）@gacci这正是visibility属性设置为none所能实现的。“即使不可见元素也会占用页面空间。使用display属性创建不占用空间的不可见元素！”-打得好，我没有注意到！太棒了！谢谢！这非常有效。你能给我解释一下行
var-tog=this.tog^=1；
？@Phoenix\u uy
this
是单击的HTMLElement对象，
。tog
只是我们动态创建的一些虚拟属性，用于存储
0/1
值。要切换
0/1
val您可以使用
^
（按位异或）作为I/O切换程序@Phoenix\u uy一种更有效的方法是使用
数据-*
属性：
var-tog=this.dataset.tog^=1；
选择您最喜欢的；）@Phoenix\u uy正如我所说的，在CSS
中设置。主搜索continer
到
位置：绝对
（作为覆盖）。此外，在jQuery中，将行更改为：
$input.css（{visi