0

我创建了一个从页面外部滑入的菜单。问题是，当您单击菜单中的某个项目并加载新页面时，新页面会在菜单关闭的情况下加载。有没有办法告诉浏览器在新页面加载后保持菜单打开？

这是打开菜单的代码

<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-->
4

4 回答 4

0

你应该只有一个 $(document).ready() 函数，因为它只会被调用一次。

尝试将您的代码分开并让您的 $(document).ready() 调用这些部分，然后如果您仍然遇到问题，请重新发布。

IE

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

function closeIcon(){
//dostuff
}

function menuIcon(){
//dostuff
}
于 2013-09-24T22:47:25.013 回答
0

离开页面时不能保留 jQuery 事件。如果您离开页面，请在元素上添加类以打开菜单。

您可以在您的链接中传递参数以了解您必须执行的操作

此外，您只能使用一个$(document).ready();

于 2013-09-24T22:19:42.163 回答
0

我认为您应该GET在新页面中添加一个参数，以便您知道何时需要显示菜单。

查看此页面以了解有关如何使用 jQuery 获取 URL 参数的更多信息：获取转义的 URL 参数

另外，我认为您忘记在示例中添加一些 html。那些元素是什么？ .left .right #nav

于 2013-09-24T22:24:01.643 回答
0

与其在窗口上加载新页面，不如使用 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") );
      });
}

这也会使过渡看起来更平滑。

于 2013-09-24T22:42:46.243 回答