单击以切换div

Question

我正在用滑出搜索框制作一个WordPress主题。 我想通过单击隐藏/切换搜索框。 这是我的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

该代码应该工作-

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做了些微更改

Answer 2

您可以使用window.onclick事件来实现：
（您没有发布任何HTML代码，因此这只是使用它的一个示例）

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

Answer 3

如果这是完整的代码，则错误是由此函数中多余的'{'字符引起的：

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

您应该删除多余的{

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

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