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");

                });

知道出了什么问题吗？

编辑：这就是我所说的： enter image description here

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

你说得对。当您单击body标签中的任何位置（整个页面）时，分配给它的.share-box类的元素将为fadeOut。代码按预期工作。

取出那段代码，盒子不会消失 - 不知道你还想用代码实现什么呢？

当关注隐藏元素（取消隐藏）和使用切换之后的jQuery问题

1 个答案: