即使输入被隐藏,也要在输入文本旁边放置按钮?
Place button next to input text even if the input is hidden?
我有一个搜索表单,我需要输入文本开始隐藏,并使用名为搜索的按钮显示输入,当显示输入时,名为搜索的按钮将转换为关闭按钮以再次隐藏输入文本。
我的问题是,当输入文本被隐藏时,按钮会移动到我网站的中心。我需要留在搜索框旁边。
这是我的代码:
<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 查看行为。
首先:fiddle 这里: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>
我不知道你的 css 中有什么,但是如果你希望按钮保持在与输入文本可见时相同的位置,那么不要设置显示 属性 到 none 你应该设置可见性:隐藏。 http://www.w3schools.com/cssref/pr_class_visibility.asp
最简单的方法是在您的输入文本字段周围放置一个 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; height:15px;和 float:left; .为了拥有响应式设计,您应该始终考虑对宽度属性使用百分比。
jQuery toggle()
方法在 display
属性 上运行,当设置为 display:none;
时,基本上会从文档流中隐藏您的元素。
而是使用 CSS 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");
});
或者也使用 ^ 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
使用 css 的另一种方法...并不完美,但您可以使用它来获得您想要的结果。
.js-btn-toggle_search {
position:absolute;
top: 0.5em;
left: 50%;
}
我有一个搜索表单,我需要输入文本开始隐藏,并使用名为搜索的按钮显示输入,当显示输入时,名为搜索的按钮将转换为关闭按钮以再次隐藏输入文本。 我的问题是,当输入文本被隐藏时,按钮会移动到我网站的中心。我需要留在搜索框旁边。
这是我的代码:
<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 查看行为。
首先:fiddle 这里: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>
我不知道你的 css 中有什么,但是如果你希望按钮保持在与输入文本可见时相同的位置,那么不要设置显示 属性 到 none 你应该设置可见性:隐藏。 http://www.w3schools.com/cssref/pr_class_visibility.asp
最简单的方法是在您的输入文本字段周围放置一个 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; height:15px;和 float:left; .为了拥有响应式设计,您应该始终考虑对宽度属性使用百分比。
jQuery toggle()
方法在 display
属性 上运行,当设置为 display:none;
时,基本上会从文档流中隐藏您的元素。
而是使用 CSS 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");
});
或者也使用 ^ 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
使用 css 的另一种方法...并不完美,但您可以使用它来获得您想要的结果。
.js-btn-toggle_search {
position:absolute;
top: 0.5em;
left: 50%;
}