3

im trying to get my bootstrap dropdowns to be open by default at screens at or smaller than 600px (mobile).

this seems to get it to try but it looks like something overrides it and closes it again:

<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>

any ideas on how to make this work?

I can get it to work on resize with this, but i need it to work on pageload/doc ready..

<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>
Trevor
  • 16,080
  • 9
  • 52
  • 83
Jeff Sherwood
  • 31
  • 2
  • 4
  • If something is overriding your script code. Try moving your script below the bootstrap script code. – Trevor Sep 30 '13 at 13:39
  • This solution might help: [enter link description here][1] [1]: http://stackoverflow.com/questions/18939015/remove-dropdown-link-and-show-all-of-its-items-in-navbar-menu – Zenvied Mar 21 '14 at 00:47

2 Answers2

2

You can move them into the same handler, by triggering on multiple events.

<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>
rob_james
  • 1,262
  • 1
  • 12
  • 17
0

I had the same issue, here is another approach using jquery that doesn't involve messing with less code or css.

I just added a trigger to open the dropdown menu inmediately after menu is opened.

There's a timeout that waits until the main menu is opened. (there will be 100 ms delay until dropdown is opened), If you like it to don't wait I guess that can be changed in less.

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

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

    }
});
DiegoFreelancer
  • 161
  • 6