Как «открыть» раскрывающееся меню Bootstrap при загрузке страницы на экранах размером менее 600 пикселей

Я пытаюсь открыть раскрывающиеся списки начальной загрузки по умолчанию на экранах размером менее 600 пикселей (мобильный).

это, кажется, заставляет его попробовать, но похоже, что что-то переопределяет его и снова закрывает:

<script type="text/javascript">
$(window).load(function () {
    var width = $(window).width();
    if (width >= 0 && width <= 600) {
        $('#openBrowseMobile').addClass('open');
    }
    else {
        $('#openBrowseMobile').removeClass('open');
    }
})
.load();
</script>

любые идеи о том, как сделать эту работу?

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

<script type="text/javascript">
$(window).resize(function () {
    console.log('resize called');
    var width = $(window).width();
    if (width >= 0 && width <= 600) {
        $('#openBrowseMobile').addClass('open');
    }
    else {
        $('#openBrowseMobile').removeClass('open');
    }
})
.resize();
</script>

mobile javascript menu twitter-bootstrap nav
person Jeff Sherwood    schedule 29.09.2013    source источник
comment
Если что-то переопределяет код вашего скрипта. Попробуйте переместить свой скрипт ниже кода скрипта начальной загрузки.   -  person Trevor    schedule 30.09.2013
comment
Это решение может помочь: [введите описание ссылки здесь][1] [1]: stackoverflow.com/questions/18939015/   -  person Zenvied    schedule 21.03.2014

Ответы (2)


arrow_upward
2
arrow_downward

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

<script type="text/javascript">
$(window).on('load resize',function () {
    console.log('resize called');
    var width = $(window).width();
    if (width >= 0 && width <= 600) {
        $('#openBrowseMobile').addClass('open');
    }
    else {
        $('#openBrowseMobile').removeClass('open');
    }
});
</script>
person rob_james    schedule 29.04.2015

arrow_upward
0
arrow_downward

У меня была та же проблема, вот еще один подход с использованием jquery, который не требует возни с меньшим количеством кода или css.

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

Есть тайм-аут, который ждет, пока не откроется главное меню. (будет задержка 100 мс, пока не откроется раскрывающийся список). Если вам нравится не ждать, я думаю, это можно изменить за меньшее время.

$(".navbar-toggle").click(function() {         

    if (window.matchMedia("(max-width: 768px)").matches) {
        // on mobile, dropdown default opened:
        setTimeout(function() {
            $(".dropdown-toggle").click();
        }, 100);

    }
});
person DiegoFreelancer    schedule 21.04.2014