Question

我想通过单击页面上的某个位置来隐藏div，但只有在首次显示div时才能通过单击预览来显示。

我有这个：

$(function() {  
    $("#videopreview").click(function() {
    $("#videolarge").css({ display: 'block' });
    $("#videopreview").css({ display: 'none' });

        $("#videolarge").click(function(){ return false; });
        $(document).one("click", function() { 
        $("#videolarge").css({ display: 'none' });
        $("#videopreview").css({ display: 'block' });

        });
    });
});

它同时运行两个函数，所以没有发生任何事情：）

更新

$(function() {  
$("#videopreview").click(function() {
    $("#videolarge").css({ display: 'block' });
    $("#videopreview").css({ display: 'none' });
});
$("#videolarge").click(function(){ return false; });
$("#videopreview").click(function(){ return false; });
$(document).click(function() { 
    $("#videolarge").css({ display: 'none' });
    $("#videopreview").css({ display: 'block' });
});
});

我可以使用remove（）但是一旦隐藏我就无法再次运行它（有意义）。我怎么处理呢？

Answer 1

您不应该在另一个事件函数中使用该事件。那不行。

请改用此代码：

$(function() {  
    $("#videopreview").click(function() {
        $("#videolarge").css({ display: 'block' });
        $("#videopreview").css({ display: 'none' });
    });
    $("#videolarge").click(function(){ return false; });
    $(document).one("click", function() { 
        $("#videolarge").css({ display: 'none' });
        $("#videopreview").css({ display: 'block' });
    });
});

Answer 2

如果您从一开始就附加两个处理程序，但在document.click处理程序中检查大型视频是否在尝试执行任何操作之前是否可见，并检查它是否不是单击的视频预览。类似的东西：

$(function()
{  
    $("#videopreview").on('click', function()
    {
        $("#videolarge").css({ display: 'block' });
        $("#videopreview").css({ display: 'none' });
    });

    $(document).on("click", function(e)
    {
        if ($("#videolarge").is(":visible") && e.target.id !== "videopreview")
        {
            $("#videolarge").css({ display: 'none' });
            $("#videopreview").css({ display: 'block' });
        }
    });
});

附注：不是直接设置两个元素的CSS属性，而是可以更简洁，更快速地拥有可以添加或删除的适当CSS类。

运行第一个函数后调用函数

2 个答案: