点击即可切换 div

Question

我正在制作一个带有滑出式搜索框的 wordpress 主题。我想 hide/toggle 点击离开搜索框。这是我的 javascript

jQuery(document).ready(function($){
    $("#flip").click(function(){
        $("#searchbox").toggle("slide", { direction: "right" }, 500);
    });

        $("#flip2").click(function(){
        $("#searchbox").toggle("slide", { direction: "right" }, 500);
    });

});


jQuery('body').on('click', function(e){
{
        $("#searchbox").toggle("slide", { direction: "right" }, 500);
});
jQuery('#searchbox').click(function(e)
{
   e.stopPropagation();
});

尝试此操作时出现意外的令牌错误。感谢您的帮助

Answer 1

您可以通过 window.onclick 事件来完成：
（您没有 post 任何 HTML 代码，所以这只是一个使用它的例子）

var yourbox = document.getElementById('yourbox');
window.onclick = function(event) {
    if (event.target == yourbox) yourbox.style.display = "none";
}

Answer 2

如果这是完整代码，则错误是由您在此函数中的额外“{”字符引起的：

jQuery('body').on('click', function(e){
{
    $("#searchbox").toggle("slide", { direction: "right" }, 500);
});

您应该删除多余的 {

jQuery('body').on('click', function(e){
    $("#searchbox").toggle("slide", { direction: "right" }, 500);
});

也就是说，此逻辑可能不适用于您尝试执行的操作，但这可能是意外的令牌错误。

Answer 3

这段代码应该可以工作-

jQuery(function() {

        jQuery('#flip').click(function() {
        jQuery("#searchbox").toggle("slide", { direction: "right" }, 500);
        return false;
    });
        });

jQuery(document).click(function() {
        jQuery("#searchbox").hide("slide", { direction: "right" }, 500);
 });

jQuery("#searchbox").click(function(e) {
    e.stopPropagation(); 
});

这里是 jsfiddle 为了您的目的和 wordpress

我稍作了改动

点击即可切换 div

click away to toggle a div

javascript

wordpress

jquery

toggle