javascript - 专注于隐藏元素(取消隐藏后)并使用切换时的 jQuery 问题

Question

我一直在尝试在有人点击我的“分享”按钮后自动关注一个名为#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");
                });
     });

Answer 1

你完全正确。当您单击正文标签(整个页面)中的任意位置时，分配给它的 .share-box 类的元素将淡出。代码按预期工作。

去掉那部分代码，框就不会淡出 - 不过不确定您还想用代码实现什么？