locked
Overridding bootstrap 3.3.7 menu behaviour only works when code stepped RRS feed

  • Question

  • User-963208184 posted

    I'm using the bootstrap classes against a customised menu. In the main it's behaving as expected. However, when I reduce my browser width so that the 'hamburger' menu comes into view. If I open menu items more than the top level, then press the 'hamburger' menu to close the menu, it either closes just one level or no levels. If I step my code in chrome, everything works fine and all menus collapse as expected. Here is the Jquery that should be doing the work:

    ('.navbar-toggle').on('click', function (e) {
    
        if (!$('#mainmenuicon').hasClass('fa-chevron-up')) {
            $('#mainmenuicon').removeClass('fa-chevron-down');
            $('#mainmenuicon').addClass('fa-chevron-up');
            $('.dropdown').each(function () {
                colorStyle($(this)[0], 'default');
            });
        }
        else {
            $('#mainmenuicon').removeClass('fa-chevron-up');
            $('#mainmenuicon').addClass('fa-chevron-down');
            //need to close all open menus plus parent
            toggleMainMenu();
        }
    });
    
    function toggleMainMenu() {
        $('.collapse.in').each(function () {
            if ($(this)[0].id !== 'mainmenu') {
                $(this).removeClass('collapse in');
            }
        });
        $('#mainmenu').removeClass('in').addClass('collapse');
    }

    Here is a link for you to see the behaviour: codepen I don't really want to start placing wait/sleep statements in my code to force my expected behaviour.

    Tuesday, July 31, 2018 7:36 AM

Answers

  • User-963208184 posted

    Hi Gary,

    I Added the following :

    $('#mainmenu').on('shown.bs.collapse', function (e) {
        if ($('#mainmenuicon').hasClass('fa-chevron-down')) {
            toggleMainMenu();
        }
    });

    This seemed to do the trick. I tried to move my code from the click event of the .navbar-toggle event to the bootstrap event, but this also broke the behaviour

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 3, 2018 9:11 AM

All replies

  • User1163516801 posted

    Could you confirm whether the code correct you provided at codepen. As I cannot find any dom with id "mainmenuicon" used in your function.

    <audio controls="controls" style="display: none;"></audio>

    Thursday, August 2, 2018 1:32 AM
  • User-963208184 posted

    I've changed the code on codepen. It was a late amendment to the 'humburger button', to change from the typical 3 bars to show the word 'Menu' and have an icon switch for open and close..

    Thursday, August 2, 2018 6:38 AM
  • User1163516801 posted

    Did you mean, you want close all the level of collapsed side menus, when click the menu button? 

    Besides, why you directly modify CSS style of DOMs, why don't use js library of Bootstrap?

    <audio controls="controls" style="display: none;"></audio>

    Thursday, August 2, 2018 7:17 AM
  • User-963208184 posted

    Hi Gary,

    I Added the following :

    $('#mainmenu').on('shown.bs.collapse', function (e) {
        if ($('#mainmenuicon').hasClass('fa-chevron-down')) {
            toggleMainMenu();
        }
    });

    This seemed to do the trick. I tried to move my code from the click event of the .navbar-toggle event to the bootstrap event, but this also broke the behaviour

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 3, 2018 9:11 AM