Автоматическая смена width JQuery

277

05 апреля 2017, 13:32

Всем привет:)

Проблемная часть кода:

 var posChange = function() {
         if ($(document).width() <= '340') {
             $('nav>ul>li>ul').css('position', 'inherit');
            $('nav').css('width','auto');
         } else {
             $('nav>ul>li>ul').css('position', 'absolute');
            $('nav').css('width','806px');

         }
     };
     $(window).on('load resize', posChange);

В чем проблема:

При установке этой функцией значения width в 806px ,размер перестает изменяться обратно при размере окна браузера в 304 px. Собстно,даже если убрать часть функции,устанавливающую значение и прописать значение в css -> это все дело тоже не работает как надо.

Задача и чего я всем этим хочу добиться:

Есть менюшка. Менюшка должна терять абсолютное позиционирование(точнее подсписок nav>ul>li>ul должен) при размере окна браузера ниже 340 (в будущем из переменной,но сейчас значения оно не имеет) и...так же должна терять любое настроенное значение поля width...(элемент nav должен) Ну,а по возвращению в >340px под-список (nav>ul>li>ul) должен получить обратно абсолютное позиционирование ,а nav должен вернуть свою ширину...

Позиционирование меняет свойства как положено,проблема только с шириной.

Если есть какие то еще способы сделать тоже самое,буду рад о них услышать,в JQ пару дней...эксперементируем)

Весь Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="nav.css">
    <script src="nav.js"></script>
    <title>Document</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="javascript:void(0)">Выпадающее меню1</a>
                <ul>
                    <li><a href="javascript:void(0)">Вложенность1</a></li>
                    <li><a href="javascript:void(0)">Вложенность2</a></li>
                    <li><a href="javascript:void(0)">Вложенность3</a></li>
                </ul>
            </li>
            <li><a href="javascript:void(0)">Выпадающее меню2</a>
                <ul>
                    <li><a href="javascript:void(0)">Вложенность1</a></li>
                    <li><a href="javascript:void(0)">Вложенность2</a></li>
                    <li><a href="javascript:void(0)">Вложенность3</a></li>
                </ul>
            </li>
            <li><a href="javascript:void(0)">Выпадающее меню3</a>
                <ul>
                    <li><a href="javascript:void(0)">Вложенность1</a></li>
                    <li><a href="javascript:void(0)">Вложенность2</a></li>
                    <li><a href="javascript:void(0)">Вложенность3</a></li>
                </ul>
            </li>
            <li><a href="javascript:void(0)">Выпадающее меню4</a>
                <ul>
                    <li><a href="javascript:void(0)">Вложенность1</a></li>
                    <li><a href="javascript:void(0)">Вложенность2</a></li>
                    <li><a href="javascript:void(0)">Вложенность3</a></li>
                </ul>
            </li>
            <li><a href="javascript:void(0)">Выпадающее меню5</a>
                <ul>
                    <li><a href="javascript:void(0)">Вложенность1</a></li>
                    <li><a href="javascript:void(0)">Вложенность2</a></li>
                    <li><a href="javascript:void(0)">Вложенность3</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
</html>

Весь css:

a {
    text-align: center;
    border-radius: 100px 100px;
}
nav {
    margin: auto;
}
nav ul {
    margin: auto;
    padding: 0;
    list-style-type: none;
}
nav>ul>li {
    display: inline-block;
}
nav>ul>li>ul {
    display: none;
    position: absolute;
}
nav ul li a {
    display: block;
    margin: 2px;
    padding: 2px;
    text-decoration: none;
    Color: #39b1a3;
    background: #303030;
    box-shadow: 1px 1px 0.05px #153c38;
    height: 25px;
    width: 150px;
    opacity: 1;
}
nav ul li a:hover {
    box-shadow: inset 2px 2px 10px 25px #d1f1e1;
    Color: #256e68;
}
nav>ul>li>ul>li>a {
    background: #3b3b3b;
    box-shadow: 1px 1px 0.05px #153c38;
}

Весь JS:

 $(function() {
     var opac = $("nav>ul>li>a").css("opacity");
     //При наведении на любой из элементов меню\подменю все остальные not(this) становятся прозрачнее.
     $("nav>ul li a").hover(
         function() {
             $("nav>ul li a").not(this).stop().animate({
                 opacity: "0.85"
             }, 300);
         },
         function() {
             $("nav>ul li a").not(this).stop().animate({
                 opacity: opac
             }, 300);
         });
     //Все внутренние подсписки останавливают свою анимацию,пояляются\изчезают при наведении/
     $("nav>ul>li").hover(
         function() {
             $(this).children("ul").stop(false, true).fadeIn(200);
         },
         function() {
             $(this).children("ul").stop(false, true).fadeOut(1);
         });
     //Вычисляем размер окна браузера.
     //Если оно ниже нужного - убираем абсолютное позиционирование,убираем статический размер блоку nav.Под нужным на данный момент 340px.
     var posChange = function() {
         if ($(document).width() <= '340') {
             $('nav>ul>li>ul').css('position', 'inherit');
             $('nav').css('width', 'auto');
         } else {
             $('nav>ul>li>ul').css('position', 'absolute');
             $('nav').css('width', '806px');
         }
     };
     $(window).on('load resize', posChange);
 });

Answer 1

обычно задаю еще и else if + ресайз $(window).width():

$(function() { 
     var opac = $("nav>ul>li>a").css("opacity"); 
 
     //При наведении на любой из элементов меню\подменю все остальные not(this) становятся прозрачнее. 
     $("nav>ul li a").hover( 
         function() { 
             $("nav>ul li a").not(this).stop().animate({ 
                 opacity: "0.85" 
             }, 300); 
         }, 
 
         function() { 
             $("nav>ul li a").not(this).stop().animate({ 
                 opacity: opac 
             }, 300); 
 
         }); 
 
     //Все внутренние подсписки останавливают свою анимацию,пояляются\изчезают при наведении/ 
     $("nav>ul>li").hover( 
         function() { 
             $(this).children("ul").stop(false, true).fadeIn(200); 
         }, 
 
         function() { 
             $(this).children("ul").stop(false, true).fadeOut(1); 
 
         }); 
     //Вычисляем размер окна браузера. 
     //Если оно ниже нужного - убираем абсолютное позиционирование,убираем статический размер блоку nav.Под нужным на данный момент 340px. 
     function posChange() { 
         if ($(window).width() <= 340) { 
             $('nav>ul>li>ul').css('position', 'inherit'); 
             $('nav').css('width', 'auto'); 
         } else if($(window).width() > 340){ 
             $('nav>ul>li>ul').css('position', 'absolute'); 
             $('nav').css('width', '806px'); 
         } 
     }; 
 
    $(window).on('load resize', posChange); 
 });

a { 
    text-align: center; 
    border-radius: 100px 100px; 
} 
 
nav { 
    margin: auto; 
} 
 
nav ul { 
    margin: auto; 
    padding: 0; 
    list-style-type: none; 
} 
 
nav>ul>li { 
    display: inline-block; 
} 
 
nav>ul>li>ul { 
    display: none; 
    position: absolute; 
} 
 
nav ul li a { 
    display: block; 
    margin: 2px; 
    padding: 2px; 
    text-decoration: none; 
    Color: #39b1a3; 
    background: #303030; 
    box-shadow: 1px 1px 0.05px #153c38; 
    height: 25px; 
    width: 150px; 
    opacity: 1; 
} 
 
nav ul li a:hover { 
    box-shadow: inset 2px 2px 10px 25px #d1f1e1; 
    Color: #256e68; 
} 
 
nav>ul>li>ul>li>a { 
    background: #3b3b3b; 
    box-shadow: 1px 1px 0.05px #153c38; 
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
   
<nav> 
        <ul> 
            <li><a href="javascript:void(0)">Выпадающее меню1</a> 
                <ul> 
                    <li><a href="javascript:void(0)">Вложенность1</a></li> 
                    <li><a href="javascript:void(0)">Вложенность2</a></li> 
                    <li><a href="javascript:void(0)">Вложенность3</a></li> 
                </ul> 
            </li> 
            <li><a href="javascript:void(0)">Выпадающее меню2</a> 
                <ul> 
                    <li><a href="javascript:void(0)">Вложенность1</a></li> 
                    <li><a href="javascript:void(0)">Вложенность2</a></li> 
                    <li><a href="javascript:void(0)">Вложенность3</a></li> 
                </ul> 
            </li> 
            <li><a href="javascript:void(0)">Выпадающее меню3</a> 
                <ul> 
                    <li><a href="javascript:void(0)">Вложенность1</a></li> 
                    <li><a href="javascript:void(0)">Вложенность2</a></li> 
                    <li><a href="javascript:void(0)">Вложенность3</a></li> 
                </ul> 
            </li> 
            <li><a href="javascript:void(0)">Выпадающее меню4</a> 
                <ul> 
                    <li><a href="javascript:void(0)">Вложенность1</a></li> 
                    <li><a href="javascript:void(0)">Вложенность2</a></li> 
                    <li><a href="javascript:void(0)">Вложенность3</a></li> 
                </ul> 
            </li> 
            <li><a href="javascript:void(0)">Выпадающее меню5</a> 
                <ul> 
                    <li><a href="javascript:void(0)">Вложенность1</a></li> 
                    <li><a href="javascript:void(0)">Вложенность2</a></li> 
                    <li><a href="javascript:void(0)">Вложенность3</a></li> 
                </ul> 
            </li> 
        </ul> 
    </nav>

хотя данный пример будет работать и без else if , просто с else

Answer 2

Исходя из задачи логичнее использовать медиа квери, почему решили использовать js не знаю, может были на это причины, но на всякий случай напишу:

CSS

nav > ul > li > ul { position: absolute; }
nav { width: 806px; }
@media only screen and (max-width: 340px){
  nav > ul > li > ul { position: inherit; }
  nav { position: auto; }
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Извлечь информацию из дб в 2 колонки [требует правки]

Подскажите как можно вывести информацию из дб в несколько колонок используя php,html,mysql, а то я просто через while и у меня выходит просто список...

293

HTML

Возможно ли объединить два разных блока в один при просмотре на мобильном устройстве?

Всем здравствуйте! Адаптивный дизайн сайтаДва совершенно отдельных блока каждый со своим меню: один блок с главным меню в шапке, другой блок...

261

HTML

Как исправить код микроразметки?

Добрый день! Как исправить данный код, чтобы свойство itemprop="image" применялось только к первому элементу img в цикле, а к остальным не применялось?

197

HTML

Как загрузить файл на сервер через метод GET

Собственно, при post все хорошо(в сниффере видно тело файла), но при get файла нет

242