Question

我已经搜索了所有当前的答案，其他人提出了这个问题，在尝试了大量的示例代码之后，没有什么对我有用，所以我觉得是时候分解并问了。请原谅我，如果这是一个问题的重复，但由于我没有成功与其他变种，我认为这是可以的。

我正在使用Jquery在我的数据库中显示包含列表项的DIV。当我在它外面点击时，我希望DIV消失。这是我使用的代码。

.htaccess

我用来显示数据的DIV被命名为输出，如代码所示。有关如何在输出DIV外单击时如何使输出DIV消失的任何想法？

亲切的问候酸杰克

Answer 1

您可以执行以下操作：

$(document).click(function(e) { 
   if(!$(e.target).closest('#output').length){
      $("#output").hide();  
   }
});

Fiddle

Answer 2

将点击事件绑定到文档/正文是一个解决方案，但我更喜欢使用blur事件，使用以下代码段：

$dbh = new PDO("mysql:host=$hostname;dbname=dashboardr",$username,$password);
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$insertDocList = $dbh->prepare("INSERT INTO doc_list (doc_title, doc_content, doc_created, user_id) 
    VALUES (:docTitle, :docContent, NOW(), :user)");

if( $insertDocList === false ) {
    die("statement couldn't be prepared");
}

$insertResult = $insertDocList->execute(array( 
    'docTitle'      => $_POST['doc_title'],
    'docContent'    => $_POST['doc_content'],
    'user'          => $_SESSION['user']
));

if( $insertResult === false ) {
    die("Insert Failed");
}

$docId  = $dbh->lastInsertId();

$SQL = "INSERT INTO `cat_doc_link_table`(`link_cat_id`, `link_doc_id`) VALUES";
$values = "";
$params = [];
//...

Answer 3

@ f01和@A。沃尔夫

谢谢你们的回答。我对这个问题的最终解决方案似乎与以下代码一起使用，该代码由@ f01提供，我只是玩了一下它以完成我需要的东西。 A.沃尔夫，你的回答也很棒，但我的Javascript能力不存在，所以我真的不知道怎么把它带到下一步。无论如何，对于有此问题的任何其他人，这里是在搜索区域外单击时隐藏jquery搜索DIV的代码。如果要显示DIV以进行其他搜索，此代码也会重新打开它。代码下面的解释。

    <script type="text/javascript" src="https://ajax.googleapis.com    /ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript"> 
        function searchq(){
            $("#output").show(); 
            var searchTxt = $("input[name='search']").val();
            $.post("live_search.php", {searchVal: searchTxt},     function(output) {
                $("#output").html(output);
                $(document).click(function(e) { 
                 if(!$(e.target).closest('#output').length){
                 $("#output").hide(); 
                    }
                    });     
                    });
              }
        </script>

注意 - 隐藏DIV的代码是此部分（由f01提供）

$(document).click(function(e) { 
if(!$(e.target).closest('#output').length){
$("#output").hide();  
}
});

如果要进行其他搜索，要将DIV切换回视图，我只需将此代码添加到searchq函数的顶部。

$("#output").show();

再次感谢！

酸杰克

单击外部时隐藏元素

3 个答案: