Question

我使用了功能切换我希望如果我刷新页面，它会记住切换的位置。我尝试使用会话，但我找不到更新会话的方法（当用户想要看到更多或更少时）。

这是我的代码：

<script language="javascript"> 
    function toggle(showHideDiv, switchImgTag) {    
            var ele = document.getElementById(showHideDiv);
        var imageEle = document.getElementById(switchImgTag);
        if(ele.style.display == "block") {
            ele.style.display = "none";
            imageEle.innerHTML = '<img src="more.png"">';
        }else {
            ele.style.display = "block";
            imageEle.innerHTML = '<img src="less.png">';        
        }
    }

</script>   

<?php 
if(empty($_SESSION["toggle"])){
 $_SESSION["toggle"] = 'show'; 
}?>

<a id="imageDivLink" href="javascript:toggle('contentDivImg', 'imageDivLink');"><img src="lesss.png"></a>Title

<?php if($_SESSION["toggle"] == 'show'){ ?>
  <div id="contentDivImg" style="display: block;">
<?php 
   $_SESSION["toggle"] = 'hidden'; 
 } 
 if($_SESSION["toggle"] == 'hidden'){ ?>
   <div id="contentDivImg" style="display: none">
<?php $_SESSION["toggle"] = 'show'; 
 } ?>
Try Show & hide
</div>

Answer 1

我的第二个@Akam和@ChaseMoskal建议您使用JavaScript。

应该像

一样简单

<html>
<head>
<script type="text/javascript"> 
    function toggle(showHideDiv, switchImgTag) {    
        var ele = document.getElementById(showHideDiv);
        var imageEle = document.getElementById(switchImgTag);
        if(ele.style.display == "block") {
            // Also set the toggle cookie on toggle
            document.cookie = 'toggle=hide'
            ele.style.display = "none";
            imageEle.innerHTML = '<img src="more.png"">';
        }else {
            // Also set the toggle cookie on toggle
            document.cookie = 'toggle=show'
            ele.style.display = "block";
            imageEle.innerHTML = '<img src="less.png">';        
        }
    }
</script>   
</head>
<body>

<a id="imageDivLink" href="javascript:toggle('contentDivImg', 'imageDivLink');"><img src="lesss.png"></a>Title


<div id="contentDivImg" style="display:block">Try Show & hide</div>


<script type="text/javascript">
    // Run at the end of the body so that the dom is ready for us
    // Dont beleave me? reade this: https://groups.google.com/forum/#!topic/closure-library-discuss/G-7Ltdavy0E
    (function(){
        // Get the cookie we want to check using a fancy-pants regex
        var cookie = document.cookie.replace(/(?:(?:^|.*;\s*)toggle\s*\=\s*([^;]*).*$)|^.*$/, "$1");
        if (cookie === 'hide')
            // If the cookie says hide, just use the toggle function
            // The user wont see the change because were still running way before readystate complete
            toggle('contentDivImg', 'imageDivLink');
    }())
</script>
</body>
</html>

这使用document.cookie将切换cookie设置为显示或隐藏。如果切换cookie是隐藏的，则在页面加载完成之前调用toggle函数。

请注意，虽然通过http（s）从远程服务器（或localhost）提供文件时这将起作用，但如果使用file：protocol检索文件，则无法使用，因为cookie与域关联

如果您想了解有关在JavaScript中使用Cookie的更多信息，或者只想复制和浏览一些有用的功能（甚至是一个小框架），请查看MDN article

切换功能：记住位置

1 个答案: