我一直在尝试在有人点击我的“分享”按钮后自动关注一个名为#to 的输入字段。
目前,共享一切正常。 (即用户点击“分享”,模式框弹出,他们点击框外的任何地方,然后它关闭。一切都很好)。
问题是当我将 focus() 函数添加到框中时,它工作正常并聚焦在正确的输入字段中,但是当我单击框外的任意位置将其关闭时,“共享”按钮切换消失(并变得隐藏)。
这是输入焦点切换(这里有人建议使用切换)
$(".share-this").toggle("fast", function() {
$("#to").focus();
});
这是我的全部代码
// this is for the share
$(document).ready(function() {
// user clicks on report this button
$(".share-this").click(function() {
$(".share-this").toggle("fast", function() {
$("#to").focus();
});
// confirmation fades in
$(".share-box").fadeIn("fast"),
// Prevent events from getting pass .share-box
$(".share-box").click(function(e){
e.stopPropagation();
});
return false;
});
$("body").click(function(){
// hide the share-box if clicked anywhere aside from the box itself
$(".share-box").fadeOut().removeClass("active");
});
});
我怀疑这与单击框外的任何地方后关闭框的代码有关
$("body").click(function(){
// hide the share-box if clicked anywhere aside from the box itself
$(".share-box").fadeOut().removeClass("active");
});
知道哪里出了问题吗?
编辑:这就是我所说的:
编辑 2:这是 HTML
<li><a class="share-this">Share</a></li>
<div class="share-box">
<div class="share-arrow"></div>
<ul class="share-sites">
<li><a class="facebook">Facebook</a></li>
<li><a class="twitter">Twitter</a></li>
<li><a class="reddit">Reddit</a></li>
<li><a class="digg">Digg</a></li>
<li><a class="delicious">Delicious</a></li>
<li><a class="stumbleupon">StumbleUpon</a></li>
</ul>
<div class="sep"></div><p>
<?
echo "<form class=\"form\" autocomplete=\"off\" method=\"post\" action=\"\">";
echo "<label class=\"label-share\" id=\"lto\" for=\"email\">To</label>";
echo "<input class=\"input-short\" id=\"to\" type=\"text\" name=\"to\">";
echo "</form>";
}
?>
</div>
编辑 3:让它工作。这是更新的代码。用 fadeIn() 替换了选择器和切换函数。
// this is for the share
$(document).ready(function() {
// user clicks on report this button
$(".share-this").click(function() {
$(".share-box").fadeIn("fast", function() {
$("#to").focus();
});
// confirmation fades in
$(".share-box").fadeIn("fast"),
// Prevent events from getting pass .share-box
$(".share-box").click(function(e){
e.stopPropagation();
});
return false;
});
$("body").click(function(){
// hide the share-box if clicked anywhere aside from the box itself
$(".share-box").fadeOut().removeClass("active");
});
});
最佳答案
你完全正确。当您单击正文标签(整个页面)中的任意位置时,分配给它的 .share-box 类的元素将淡出。代码按预期工作。
去掉那部分代码,框就不会淡出 - 不过不确定您还想用代码实现什么?
关于javascript - 专注于隐藏元素(取消隐藏后)并使用切换时的 jQuery 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5431788/