Fatal编程技术网
  • javascript/
  • 在加载新页面时保持javascript菜单打开

在加载新页面时保持javascript菜单打开

javascript jquery

在加载新页面时保持javascript菜单打开,javascript,jquery,collapse,Javascript,Jquery,Collapse,我创建了一个从页面外部滑入的菜单。问题是，当您单击菜单中的某个项目并加载新页面时，新页面会在菜单关闭的情况下加载。是否有方法告诉浏览器在加载新页面后保持菜单打开 这是打开菜单的代码 <script> $(document).ready(function(){ $("#closeIcon").hide() $(".left").width('0%'); $(".right").width('100%'); });

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

这是打开菜单的代码

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


$（文档）.ready（函数（）{
$（“#closeIcon”）.hide（）
$（“.left”）.width（'0%”）；
$（“.right”）.width（'100%）；
});
$（文档）.ready（函数（）{
$（“#menuIcon”）。单击（函数（）{
$（“.left”）.animate（{width:'10%}，“500”）；
$（“.right”）.animate（{width:'90%}，“500”）；
$（“#导航”）。设置动画({
左：30%，
}, "500" );
美元（“#menuIcon”）。淡出（500）
$（“#closeIcon”）.fadeIn（500）
});
});
$（文档）.ready（函数（）{
$（“#关闭图标”）。单击（函数（）{
$（“.left”）.animate（{width:'0%}，“500”）；
$（“.right”）.animate（{width:'100%}，“500”）；
$（“#导航”）。设置动画({
左：“0”，
}, "500" );
美元（“#menuIcon”）。法代因（500）
$（“#closeIcon”）.fadeOut（500）
});
});
这是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-->
离开页面时，不能保留jQuery事件。 如果您离开页面，请在元素上添加类以打开菜单

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

此外，您只能使用一个
$（document）.ready（）

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

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

另外，我认为您忘记在示例中添加一些html。这些要素是什么？ 
.left
.right
#nav
为什么不使用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>
这也会使转换看起来很难进行。

您应该只有一个$（document）.ready（）函数，因为它只会被调用一次

尝试将代码拆分，并让$（document）.ready（）调用这些部分，如果仍然有问题，则重新发布

即

您必须使用一种形式的持久性来保留导航以外的信息-，等等。您是否使用任何服务器端语言？还是纯HTML？这就是为什么我说“可以”。如果他不知道，那只是帮个忙。对不起，我的英语不好。有时候我没有好话。谢谢你的回复。嗨，谢谢你的回复，我还是一个javascript的初学者，主要是通过反复试验来实现功能。如果我试图删除另一个document.ready，那么菜单中的javascript目前可以正常工作。我应该如何编写它？当我说删除其他$（document）.ready时，我想说移动同一个文档中的所有.ready内容。但即使你做到了，这也不是问题所在。您无法加载页面并保留js事件。您可以在链接上传递一个参数，以便在加载其他页面时了解菜单的状态。@DonovanCharpin对不起，我以前的评论。终于明白你的意思了。我只是看错了我已经为.left.right添加了html。。。基本上，当你点击菜单时，左键和右键调整大小和导航会滑动进来。我刚刚注意到你更新了HTML代码。但我想你明白我的意思了。我以前从未使用过ajax，我必须仔细阅读它，但在深入研究之前，我必须补充一点，我的网站使用的是django cms，页面是django模板文件。那么这种技术在这种情况下还能工作吗？我不熟悉django，但它应该可以。ajax基本上是在后台加载一个网页，然后利用它所拥有的信息做一些事情。例如，在我的示例中，我正在加载作为href参数发送的url。加载完成后，我用该文档的
id=“body”
提取元素（用
$（html）。找到（“#body”）
），并用
id=“body”
替换当前文档元素中的元素。其他一切（包括菜单和javascript变量）都保持不变。 
$("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") );
      });
}

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

function closeIcon(){
//dostuff
}

function menuIcon(){
//dostuff
}