Блог

Главная - Вопросы по программированию - Использование jQuery для изменения порядка элементов списка и возврата их к значению по умолчанию

Использование jQuery для изменения порядка элементов списка и возврата их к значению по умолчанию

#jquery #menu #menu-items

#jquery #меню #меню-элементы

Вопрос:

Я создаю адаптивное меню, которое масштабируется в зависимости от размера экрана. мне нужно скрыть некоторые элементы li и изменить другие при изменении размера экрана, затем, когда размер экрана возвращается к исходному размеру, все элементы должны вернуться к тому, как они были.

Я вроде бы заработал, когда изменил размер окна, но я пытаюсь вернуть его в исходное состояние

это мой код:

** HTML ***

 <nav id="main-nav">
        <ul class="menu">
            <li class="login-mobile mobile"><a class="login" href="">login</a></li>
            <li class="signup-mobile mobile"><a class="signup" href="">sign up</a></li>
            <li class="shop-mobile mobile"><a class="shop" href="">shop</a></li>
            <li ><a class="home" href="">home</a></li>
            <li ><a class="about" href="">about</a></li>
            <li ><a class="promo" href="">promo</a>
                <ul class="submenu">
                    <li><a href="">Apple - Free Wi-Fi P</a></li>
                    <li><a href="">Lanseria - FREE Wi-Fi </a></li>
                    <li><a href="">BlackBerry PlayBook</a></li>
                </ul>
            </li>
            <li ><a class="services" href="">services</a></li>
            <li ><a class="tools" href="">tools</a></li>
            <li ><a class="converge" href="">converge</a></li>
            <li ><a class="news" href="">news</a></li>
            <li ><a class="contact" href="">contact</a></li>
            <li class="darkblue_grad"><a class="help" href="">help</a></li>
        </ul>
    </nav>

** jQuery **

функция menuOrder(){

  if ($(window).width() > 590) {
    $("nav#main-nav ul.menu li.login-mobile, nav#main-nav ul.menu li.signup-mobile").hide();
var mobile = $("nav#main-nav ul.menu > li.shop-mobile");
mobile.appendTo(mobile.parent("ul.menu")).end();

} else{
    $("nav#main-nav ul.menu li.login-mobile, nav#main-nav ul.menu li.signup-mobile").show();

}

}

$(документ).готово (функция (){

     menuOrder();

    $(window).resize(function() {

        menuOrder();
    });

});

Ответ №1:

Почему бы не сохранить innerHTML вашего меню в переменной во время загрузки, а затем просто записать его обратно в DOM, когда вам понадобится новая копия. Нет необходимости «отменять» что-либо таким образом.

Редактировать:

захват исходного меню (сделайте это перед тем, как манипулировать им, при загрузке страницы):

 var originalMenu = $('#main-nav').html()

обратная запись исходного меню:

 $('#main-nav').html(originalMenu)

Комментарии:

1. извините, но я не понимаю, что-то вроде новичка в этом jQuery …. не могли бы вы уточнить

2. Извините, если я звучу глупо. но делаю ли я это в своей функции? функция menuOrder(){ var originalMenu = $(‘nav#main-nav’).html(); if ($(window). width() > 590) { $(«nav#main-nav ul. меню li.login-мобильный, навигация #главная-навигация ul. меню li.регистрация-мобильный»).скрыть(); var mobile = $(«nav#main-nav ul. меню> li.shop-mobile»); mobile.appendTo(mobile.parent(«ul.menu»)).end(); } else{ $(‘nav#main-nav’).html(originalMenu); } }

3. по-видимому, мне нужна репутация 15, чтобы проголосовать… сделаю, как только смогу