2

I am currently having issues with my dropdown menus. I would like them to only open/close when the dropdown menu is clicked, not the list items or anywhere else in the body.

Here is my code that I am having the issues with:

 <main>
    <div id="wrapper">
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li>
                    <span style="height:50px" />
                </li>
                <li class="dropdown" id="mi1">
                    <a class="menu-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">Service Provision<span class="fa fa-chevron-down pull-right sideMenuChevrons"></span></a>
                    <ul class="sideDropDown dropdown-menu" role="menu">
                        <li><a href="#">Service Provision<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                        <li><a href="#">Automation Requests<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a class="menu-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">NMC<span class="fa fa-chevron-down pull-right sideMenuChevrons"></span></a>
                    <ul class="sideDropDown dropdown-menu" role="menu">
                        <li><a href="#">Customers<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                        <li><a href="#">Contractors<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                        <li><a href="#">Suppliers<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a class="menu-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">Site Access<span class="fa fa-chevron-down pull-right sideMenuChevrons"></span></a>
                    <ul class="sideDropDown dropdown-menu" role="menu">
                        <li><a href="#">Site Access<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                        <li><a href="#">Key Issue<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                    </ul>
            </ul>
            <div class="dropup">
                <a id="menu-toggle-reversed" href="#" class="dropdown-toggle dropup" data-toggle="dropdown"><i id="adminIconPadding" class="fa fa-user-md"></i>Admin<span class="fa fa-chevron-up pull-right sideMenuChevronsDropUp"></span></a>
                <ul id="adminDropup" class="dropdown-menu" role="menu">
                    <li><a href="#">Settings<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></a></li>
                </ul>
            </div>
        </div>

I have tried adding inline javascript to "stopPropagation" however this has resulted in the dropdown menu not opening at all.

Here is a rough jsfiddle of what is happening with the dropdown menus in the left navigation bar: https://jsfiddle.net/jr_iridium/aqLa77ax/

I'm relatively new to bootstrap so please let me know if I have made any mistakes.

Thanks in advance.

Steffi Keran Rani J
  • 3,667
  • 4
  • 34
  • 56
jrobson
  • 23
  • 1
  • 4

1 Answers1

1

Here is my answer, after long testing since I used to with Boostrap 3. By removing the data-toggle="dropdown" is the only way to remove auto close during outside clicks. Related to here but your question is Bootstrap 4

Try this:

https://jsfiddle.net/rigz/pdc4un6L/5/

If the fiddle doesn't work just let me know, I'm having weird issue in fiddle since I'm under corporate proxy posting this :P

threeFatCat
  • 840
  • 13
  • 30
  • Sorry for the late reply, long weekend! I have tried the fiddle and the dropdown menus aren't opening at all? – jrobson May 30 '17 at 09:11
  • can you try to remove the `toggle="dropdown"` in each of your dropdown and use the jquery that i have in jsfiddle? It works fine in my local, that is why I felt weird when I posted this answer. – threeFatCat May 30 '17 at 13:58
  • or you can just copy & paste the codes that I have in fiddle then just make sure you have the correct bootstrap and jquery libraries and css. I just want to confirm if it doesn't work at all, if that's okay. Thank you – threeFatCat May 30 '17 at 14:00
  • That works perfectly for keeping the dropdown menu open when the body is clicked, thank you so much! Now my only issue is the drop-down menu closing when a list item is clicked. – jrobson Jun 01 '17 at 13:13
  • I updated my fiddle. Please kindly check. :) Glad to help. – threeFatCat Jun 01 '17 at 16:00