locked
data-toggle="collapse" menu disappears when you click it RRS feed

  • Question

  • User-973886032 posted

    hi guys,
    my data-toggle="collapse" menu disappears when its click.

    Although it does dropdown as required, whenever a users clicks anywhere on the dropdown menu, it disappears

    What am I doing wrong ? here is my code
    thanks
    Ehi

    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle bg-dark " href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    My Account
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">Other info goes here... //before the closing div


    Tuesday, March 20, 2018 10:26 PM

All replies

  • User1400794712 posted

    Hi afrika,

    You're talking about data-toggle="collapse", but it seems you are using data-toggle="dropdown" in the demo.

    According to this article:

    https://getbootstrap.com/docs/4.0/components/dropdowns/

    If we use data-toggle="dropdown", it will close menu when a users clicks anywhere, just works like what you describe. There is nothing wrong with your code. If you don't want that, you can use data-toggle="collapse" attribute(only when you click on a link, the menu will show and disappear):

    <a href="#demo" data-toggle="collapse">Collapsible</a>
    
    <div id="demo" class="collapse">
    Lorem ipsum dolor text....
    </div>
    

    If you still want to use data-toggle="dropdown" for this function, you can add js code to implement that(only when you click on a link, the menu will show and disappear):

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('body').on('click', function (e) {
                if ($('li.nav-item.dropdown .dropdown-menu a').is(e.target)) {
                    if ($(this).parent().parent().toggleClass('open').length = 1) {
                        $('li.nav-item.dropdown').removeClass('open');
                    }
                }
            })
            $('li.nav-item.dropdown a').on('click', function (event) {
                $(this).parent().toggleClass('open');
            });
        })
    </script>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle bg-dark " href="#" id="navbarDropdown1" role="button" data-toggle="collapse" aria-haspopup="true" aria-expanded="false">
            My Account
        </a>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </li>

    Best Regards,

    Daisy

    Wednesday, March 21, 2018 8:40 AM
  • User-973886032 posted

    thanks a lot Daisy

    The problem is that when a user clicks anywhere it does not close (which is the opposite) I wanted to incorporate it without any scripting. As my page is heavily scripted already. 

    Any pointers ? thanks a lot

    Wednesday, March 21, 2018 10:51 AM
  • User1400794712 posted

    Hi afrika,

    Please check if there is any error message in the broswer console with F12 developer tools.

    It seems there might be something wrong the JQuery code. Are you using online bootstrap js file? Or using your own's js file? You should check it to find if it works well or debug the related js code in browser.

    Best Regards,

    Daisy

    Thursday, March 22, 2018 9:41 AM