Я создал меню, которое перемещается извне страницы. Проблема в том, что когда вы нажимаете на элемент в меню и загружаете новую страницу, новая страница загружается с закрытым меню. Есть ли способ сообщить браузеру оставить меню открытым после загрузки новой страницы?
это код, который открывает меню
<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-->
Вместо того, чтобы загружать новую страницу в окно, почему бы не загрузить страницу с помощью 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") );
});
}
Это заставит переход выглядеть и другим.
Вы не можете сохранить событие jQuery, когда покидаете страницу. Если вы покинете страницу, добавьте класс в элемент, чтобы открыть меню.
Вы можете передать параметры в ссылке, чтобы узнать, какие действия вы должны предпринять, чтобы сделать
Кроме того, вы можете использовать только один $(document).ready();
Я думаю, вы должны добавить параметр GET
на свою новую страницу, чтобы вы могли узнать, когда вам нужно показать меню.
Проверьте эту страницу, чтобы узнать больше о том, как получить параметры URL с помощью jQuery: получить параметр экранированного URL-адреса
Кроме того, я думаю, вы забыли добавить некоторые html к вашему примеру. Что это за элементы? .left
.right
#nav
У вас должна быть только одна функция $ (document).ready(), потому что она будет вызываться только один раз.
Попробуйте разбить свой код и попросите их ($) (document).ready() вызвать эти части, а затем перетащите, если у вас все еще есть проблемы.
т.е.
$(document).ready(function(){
closeIcon();
menuIcon();
});
function closeIcon(){
//dostuff
}
function menuIcon(){
//dostuff
}