Question

我试图根据div的状态显示/隐藏'link2'。如果它已打开，请隐藏link2，如果它已关闭，请显示link2。

link1和link2触发关闭或打开面板div。由于我使用会话来记住div的状态，我希望相应的链接也能显示出来。

$('#panel').toggleClass('hidden', sessionStorage.getItem('form_visible') != 'true');
$('#flip, #flip_slip').click(function() {
    $('#panel').slideToggle('slow', function() {
        $(this).toggleClass('hidden');
    });
    sessionStorage.setItem('form_visible', $('#panel').hasClass('hidden'));
});
$('#flip_slip')[ $('#panel').is(':visible') ? "hide" : "fadeIn" ]();

HTML：

<div id="panel">
    test
   <div id="flip">link1</div>        
</div>  
<div id="flip_slip">link2</div>

编辑：

例如，如果我点击link1 - ＆gt; panel div fades ou - ＆gt; link2出现由于会话保存了面板div的状态，因此在页面刷新时，link2应该是可见的

Answer 1

Demo Fiddle代码非常简单。
jQuery代码

$(function () {
    if(sessionStorage.getItem('form_visible')===null){
        sessionStorage.setItem('form_visible', 'false');//initiate it for the first time
    };
    checkSessionStorage(); //call it to change the #panel display  

    $('#flip_slip,#flip').click(function () {
        sessionStorage.setItem('form_visible', (sessionStorage.getItem('form_visible') == 'false' ? 'true' : 'false')); //change the sessionStorage
        checkSessionStorage(); //call it to change the #panel display
    });
    function checkSessionStorage() {
        if (sessionStorage.getItem('form_visible') == 'true') {
            $('#panel').slideDown();
            $('#flip_slip').fadeOut();
        } else {
            $('#panel').slideUp();
            $('#flip_slip').fadeIn();
        }
    }
});

在不刷新页面的情况下，根据另一个div的状态显示/隐藏div

1 个答案: