Question

我的切换功能出现问题。我有一个简单的div，使用.toggle点击时可以上下移动。为了使页面更容易使用我希望用户能够点击屏幕上的任何地方以“关闭”将div向下移动而不必再次点击蓝色框（有点像在大型下拉菜单上）菜单）。

问题是我的.click功能弄乱了切换，一旦蓝色div被.click关闭，而不是.toggle的第二个功能，.toggle则需要单击两次才能再次打开它。我究竟做错了什么？

我已经使用.toggle搜索了其他相关问题，并在此处双击，但没有找到类似主题的运气

我尝试了一些.addClass和.hasClass的内容，但它似乎没有用。

这也是我的jQuery：

    $(document).ready(function(){


$(document).click(function() {
            if($("#banner").hasClass("open")){
                    $("#banner").removeClass("open").stop().animate({top:"350px"},350, 'swing')
            }});


$("#banner").toggle(
        function () {
            $(this).addClass("open").animate({top:"200px"},350, 'swing')
            },
        function () {
            $(this).removeClass("open").animate({top:"350px"},350, 'swing')
            });

});

Answer 1

为什么不将toggle更改为click：

$("#banner").click(function(e) {
    e.stopPropagation();
    if ($("#banner").hasClass("open")) {
        $("#banner").removeClass("open").animate({
            top: "350px"
        }, 350, 'swing')
    }
    else {
        $(this).addClass("open").animate({
            top: "200px"
        }, 350, 'swing');
    }
});

当.click中断时，jQuery .toggle需要双击才能打开

1 个答案: