Ответственность за исчезновение решения после открытия/закрытия

Question

Я спрашивал об этом раньше, но все еще не удалось. Надеюсь, кто-то может мне помочь сейчас ... В скрипке вы увидите отзывчивое меню, в котором есть 4 пункта меню горизонтально, когда оно больше 1000 пикселей. Менее чем 1000px меню показывает nav-btn (теперь RED box!), Который onclick показывает элементы меню, но при открытии и закрытии и изменении размера до более 1000 пикселей остальные 3 элемента меню не отображаются. Я сделал несколько тестов со средствами массовой информации, но я думаю, что решение должно быть найдено в части javascript. Любой может справиться с этим вызовом?

Здесь FIDDLE

$(function() { 
$('.nav-btn').click(function(event) { 
$('nav ul').fadeToggle(300); 
}); 
}); 

Answer 1

Вы могли бы хотеть, чтобы добавить новый медиа-запрос, как я сделал здесь @FIDDLE

@media all and (min-width: 1000px) { 
    nav ul { 
    display: block; 
    top: 60px; 
    } 
} 

Answer 2

Ну, проблема в том, что ваш fadeToggle устанавливает ваш nav > ul в style="display: none". Стили устанавливаются непосредственно над любыми таблицами стилей, если вы не используете! Important.

Таким образом, и в сочетании с NMindz ответ, попробуйте это:

@media all and (min-width: 1000px) { 
    nav ul { 
    display: block !important; 
    top: 60px; 
    } 
} 

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

nav ul.show { 
    display: block; 
} 

И для яваскрипта

$(function() { 
    $('.nav-btn').click(function(event) { 
     $('nav ul').toggleClass("show"); 
    }); 
});