держать меню JavaScript открытым при загрузке новой страницы

Question

держать меню JavaScript открытым при загрузке новой страницы

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

fred 25 сен. 2013, в 01:13

Источник

Теги:

javascript

jquery

collapse

4 ответа

Ещё вопросы

dajavax · Answer 1 · 2013-09-24T21-35-00.000Z

Вместо того, чтобы загружать новую страницу в окно, почему бы не загрузить страницу с помощью 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") );
      });
}

Это заставит переход выглядеть и другим.

Я только что заметил, что вы обновили свой HTML-код. Но я думаю, что вы поняли мою точку зрения с моей.
Я никогда раньше не использовал ajax, мне придется ознакомиться с ним, но прежде чем углубляться в это, я должен добавить, что на моем веб-сайте используется django cms и страницы представляют собой файлы шаблонов django. Так может ли эта техника все еще работать в этом случае?
Я не знаком с Джанго, но он должен. Что в основном делает ajax, так это загружает веб-страницу в фоновом режиме, а затем делает что-то с имеющейся у него информацией. Например, в моем примере я загружаю тот URL, который отправил в качестве параметра href. Затем, после завершения загрузки, я извлекаю элемент с id="body" этого документа (с $(html).find("#body") ) и заменяю его в элементе текущего документа на id="body" . Все остальное (включая переменные меню и JavaScript) осталось нетронутым.

Donovan Charpin · Answer 2 · 2013-09-24T21-17-00.000Z

0

Вы не можете сохранить событие jQuery, когда покидаете страницу. Если вы покинете страницу, добавьте класс в элемент, чтобы открыть меню.

Вы можете передать параметры в ссылке, чтобы узнать, какие действия вы должны предпринять, чтобы сделать

Кроме того, вы можете использовать только один $(document).ready();

Donovan Charpin 24 сен. 2013, в 21:17

0

Вот почему я говорю «могу». Это просто помощь, если он не знает.
Donovan Charpin 24 сен. 2013, в 22:32
0

Извините за мой английский. Иногда у меня нет хороших слов. Спасибо.
Donovan Charpin 24 сен. 2013, в 22:38
0

Привет, спасибо за ответ, я все еще очень начинающий с javascript и функционирую в основном методом проб и ошибок. Javascript в меню работает нормально, если я пытаюсь удалить другой документ. Он уже перестает работать. Как мне это написать?
fred 24 сен. 2013, в 22:46
0

Когда я говорю удалить другой $ (document) .ready, я хочу сказать, переместить все содержимое .ready в тот же. Но даже если вы сделаете это, здесь нет проблем. Вы не можете загрузить страницу и сохранить событие js. Вы можете передать параметр по ссылке, чтобы узнать состояние вашего меню при загрузке другой страницы.
Donovan Charpin 24 сен. 2013, в 22:52
0

@DonovanCharpin Извините мои предыдущие комментарии. Наконец понял, что вы имели в виду. Я просто читал это неправильно. :)
Jonathan Lonowski 24 сен. 2013, в 22:56
0

Если вы хотите, чтобы ваше меню оставалось в том же состоянии, вы должны иметь динамический веб-сайт и обновлять свой контент с помощью ajax.
Donovan Charpin 24 сен. 2013, в 23:02

Показать ещё 4 комментария

lefoy · Answer 3 · 2013-09-24T20-47-00.000Z

Я думаю, вы должны добавить параметр GET на свою новую страницу, чтобы вы могли узнать, когда вам нужно показать меню.

Проверьте эту страницу, чтобы узнать больше о том, как получить параметры URL с помощью jQuery: получить параметр экранированного URL-адреса

Кроме того, я думаю, вы забыли добавить некоторые html к вашему примеру. Что это за элементы? .left .right #nav

Я добавил html для .left .right ... по существу левый и правый изменяет размеры и перемещает слайды, когда вы нажимаете на menuIcon

TigerBear · Answer 4 · 2013-09-24T20-21-00.000Z

У вас должна быть только одна функция $ (document).ready(), потому что она будет вызываться только один раз.

Попробуйте разбить свой код и попросите их ($) (document).ready() вызвать эти части, а затем перетащите, если у вас все еще есть проблемы.

т.е.

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

function closeIcon(){
//dostuff
}

function menuIcon(){
//dostuff
}