0

我创建了一个使用 jquery 动画的搜索表单，例如NextLevelSearch。我希望当我打开搜索表单并刷新页面时它不会关闭。我怎样才能做到这一点？

我尝试过但没有用e.preventDefault();，return false;我知道这与我的问题无关。

这是我的代码：

$globalsearch_submit.click(function(){
    $('#stat').hide();
    $('.wrapper-simple').animate({'width':'275px'})
        .end().find('.wrapper-simple input[type=text]').css({opacity: 0, visibility: "visible"}).animate({'width': '231px', opacity: 1}) 
        .end().find('.wrapper-simple .button').animate({ 'right': '40px' })
        .end().find('.wrapper-simple input[type=submit]').animate({'marginLeft':'235px', opacity: 1}, 10)               
    return false;
}); 
$('.wrapper-simple input[type=submit]').click(function() {
    $('#stat').show();
    $('#stat').delay(500).css('opacity',0).show().animate({opacity:1},100); 

    $('.wrapper-simple').animate({'width':'40px'}) 
        .end().find('.wrapper-simple input[type=text]').animate({'width': '1px', opacity: 0})
        .end().find('.wrapper-simple .button').animate({ 'right': '0' })
        .end().find('.wrapper-simple input[type=submit]').animate({'marginLeft':'0', opacity: 0}).attr('value', ''); 
    return false;
});

请帮忙！谢谢你。

（我很抱歉我的英语不好）

4

1 回答 1

2

我会使用文档哈希（window.location.hash）来保存页面的当前状态；

$('.wrapper-simple input[type=submit]').click(function() {
    $('#stat').show();
    $('#stat').delay(500).css('opacity',0).show().animate({'opacity':1},100); 

    $('.wrapper-simple').animate({'width':'40px'}) 
        .end().find('.wrapper-simple input[type=text]').animate({'width': '1px', 'opacity': 0})
        .end().find('.wrapper-simple .button').animate({'right': 0})
        .end().find('.wrapper-simple input[type=submit]').animate({'marginLeft': 0, 'opacity': 0}).attr('value', '');

    document.location.hash='form';

    return false; // not related to this, but needed for other reasons
});

（在该示例中，我将其设置为“form”，因此您的页面 URL 在单击按钮后将显示为“mysite.com/mypage.htm#form”。您可以使用任何您喜欢的内容，但对允许使用的字符有一定的限制— 请参阅此答案：URL 中片段标识符的有效字符列表？）

然后，您可以在页面加载时检测到此标记：

$(document).ready(function(){
    var h=window.location.hash.replace(/^#/,'');
    if(h==='form'){
        $('#stat').css({'opacity':1}).show(); 

        $('.wrapper-simple').css({'width':'40px'}) 
            .end().find('.wrapper-simple input[type=text]').css({'width': '1px', 'opacity': 0})
            .end().find('.wrapper-simple .button').css({'right': 0})
            .end().find('.wrapper-simple input[type=submit]').css({'marginLeft': 0, 'opacity': 0}).attr('value', '');
    }
}

请注意，我已经复制了代码，但将任何动画调用更改为简单的 css 调用，以便立即更改它。

这意味着一旦您的用户单击按钮，页面的任何刷新，或书签，关闭和从书签重新打开等都将意味着表单立即打开（页面加载时会轻微闪烁，即避免更多的工作）。此外，这不使用越来越成问题的 cookie。要将表单再次标记为已关闭，您只需将哈希设置为其他值（例如空字符串）。

Twitter、Google、Facebook 和许多其他公司都使用这种技术。

于 2013-03-03T17:09:05.597 回答