jQuery .slideToggle, дисплей: нет

Question

jQuery .slideToggle, дисплей: нет

0

У меня логическая проблема. У меня есть раскрывающееся меню CSS, которое, когда ширина браузера или мобильного телефона меньше, чем 690pixles, становится меню, которое отображается только при переключении. Т.е. пользователю нужно нажать кнопку, чтобы отобразить меню. Однако логическая проблема заключается в том, что если вы измените размер браузера, переключите открытое меню, затем закройте его и измените размер браузера на всю ширину, нормальное меню исчезнет, потому что slideToggle добавляет отображение: none; стиль к элементу div, который затем вызывает проблему макета и не очень удобен для пользователя. Любые идеи, как исправить?

HTML:

<div id="primary-menu" class="drop-down">
    <div class="menu-toggle">menu-toggle</div>
    <ul id="responsive" class="menu">
        <li class="menu-item"><a href="#">Link 1</a></li>      
        <li class="menu-item"><a href="#">Link 2</a>
            <ul class="child-menu">
                <li class="menu-item"><a href="#">Link A</a></li>
                <li class="menu-item"><a href="#">Link B</a></li>
                <li class="menu-item"><a href="#">Link C</a></li>
            </ul>
        </li>
        <li class="menu-item"><a href="#">Link 3</a></li>
    </ul>
</div>

JQuery:

$(".menu-toggle").click(function(){
    $("#responsive").slideToggle( "slow", function() {});
});

drewdyer 16 фев. 2014, в 23:30

Источник

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Tasos K. · Accepted Answer · 2014-02-16T20-12-00.000Z

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

$( window ).resize(function() {
    if($( window ).width() >= 690) {
        $("#responsive").show();
    }
    else {
        $("#responsive").hide();
   }
});