在新頁面加載時保持javascript菜單打開

Question

我創建了一個菜單，可從頁面外部滑入。 問題是，當您單擊菜單中的項目並加載新頁面時，新頁面將在菜單關閉的情況下加載。 有沒有辦法告訴瀏覽器在新頁面加載后保持菜單打開？

這是打開菜單的代碼

<script>    
$(document).ready(function(){
         $("#closeIcon").hide()
         $(".left").width('0%');
         $(".right").width('100%');
      });

    $(document).ready(function(){
      $("#menuIcon").click(function(){
        $(".left").animate({width:'10%'}, "500");
        $(".right").animate({width:'90%'}, "500");
        $("#nav").animate({
                    left: '30%',
                  }, "500" );
        $("#menuIcon").fadeOut(500)
        $("#closeIcon").fadeIn(500)
      });
    });

    $(document).ready(function(){
      $("#closeIcon").click(function(){
        $(".left").animate({width:'0%'}, "500");
        $(".right").animate({width:'100%'}, "500");
        $("#nav").animate({
                    left: '0',
                }, "500" );
        $("#menuIcon").fadeIn(500)
        $("#closeIcon").fadeOut(500)
      });
    });
    </script>

這是HTML：

<html>
<div id="menu" >
            <div id="menuIcon">             
                    <a href="javascript: void(0)">
                        <img src="images/menuIcon.png">
                    </a>
            </div>
            <div id="closeIcon">
                    <a href="javascript: void(0)"> 
                        <img src="images/closeIcon.png">
                    </a>
            </div>
        </div>
</html>


<div class="left">
   <div id="nav">                       
  <div id="accordion">          
      </div> <!--ends accordion-->
   </div>
</div>          

<div class="right">
<div id="content"> 
</div><!--ends content-->
</div><!--ends right-->

Answer 1

離開頁面時，無法保留jQuery事件。 如果離開頁面，請在元素上添加類以打開菜單。

您可以在自己的鏈接中傳遞參數，以了解必須執行的操作

而且，您只能使用一個$(document).ready();

Answer 2

我認為您應該在新頁面上添加GET參數，以便可以知道何時需要顯示菜單。

檢查此頁面以了解有關如何使用jQuery 獲取URL參數的更多信息：獲取轉義的URL參數

另外，我認為您忘記為示例添加一些html。 這些元素是什么？ .left .right #nav

Answer 3

與其在窗口上加載新頁面，不如使用AJAX加載頁面並將頁面內容替換為新內容？

就像是：

<html>
<div id="menu" >
            <div id="menuIcon">             
                    <a href="javascript: void(0)">
                        <img src="images/menuIcon.png">
                    </a>
            </div>
            <div id="closeIcon">
                    <a href="javascript: void(0)"> 
                        <img src="images/closeIcon.png">
                    </a>
            </div>
</div>
<div id="body">
<!--Body here-->
</div>
</html>

JS：

$("a").click(function(e){e.preventDefault();loadNew(this.href);});
function loadNew(href){
    $.ajax({
      url: href,
      cache: false
    }).done(function( html ) {
        $( "#body" ).replaceWith( $(html).find("#body") );
      });
}

這也將使過渡看起來更悶。

Answer 4

您應該只有一個$（document）.ready（）函數，因為它將僅被調用一次。

嘗試將代碼分開，讓$（document）.ready（）調用這些部分，如果仍然遇到問題，請重新發布。

即

$(document).ready(function(){
         closeIcon();
         menuIcon();
      });

function closeIcon(){
//dostuff
}

function menuIcon(){
//dostuff
}

在新頁面加載時保持javascript菜單打開

問題描述

4 個解決方案

解決方案1
0 2013-09-24 22:19:42

解決方案2
0 2013-09-24 22:24:01

解決方案3
0 2013-09-24 22:42:46

解決方案4
0 2013-09-24 22:47:25

在新頁面加載時保持javascript菜單打開

問題描述

4 個解決方案

解決方案1 0 2013-09-24 22:19:42

解決方案2 0 2013-09-24 22:24:01

解決方案3 0 2013-09-24 22:42:46

解決方案4 0 2013-09-24 22:47:25

解決方案1
0 2013-09-24 22:19:42

解決方案2
0 2013-09-24 22:24:01

解決方案3
0 2013-09-24 22:42:46

解決方案4
0 2013-09-24 22:47:25