Avoid dropdown menu close on click inside

Question

I have a Twitter Bootstrap dropdown menu  As all Twitter Bootstrap users know  the dropdown menu closes on click  even clicking inside it    To avoid this  I can easily attach a click event handler on the dropdown menu and simply add the famous event stopPropagation       lt ul class  nav navbar-nav  gt     lt li class  dropdown mega-dropdown  gt       lt a href  javascript    class  dropdown-toggle  data-toggle  dropdown  gt         lt i class  fa fa-list-alt  gt  lt  i gt  Menu item 1        lt span class  fa fa-chevron-down pull-right  gt  lt  span gt       lt  a gt       lt ul class  dropdown-menu mega-dropdown-menu  gt         lt li gt           lt div id  carousel  class  carousel slide  data-ride  carousel  gt             lt ol class  carousel-indicators  gt               lt li data-slide-to  0  data-target   carousel  gt  lt  li gt               lt li class  active  data-slide-to  1  data-target   carousel  gt  lt  li gt             lt  ol gt             lt div class  carousel-inner  gt               lt div class  item  gt                 lt img alt    class  img-rounded  src  img1 jpg  gt               lt  div gt               lt div class  item active  gt                 lt img alt    class  img-rounded  src  img2 jpg  gt               lt  div gt             lt  div gt             lt a data-slide  prev  role  button  href   carousel                class  left carousel-control  gt               lt span class  glyphicon glyphicon-chevron-left  gt  lt  span gt             lt  a gt             lt a data-slide  next  role  button  href   carousel                class  right carousel-control  gt               lt span class  glyphicon glyphicon-chevron-right  gt  lt  span gt             lt  a gt           lt  div gt         lt  li gt       lt  ul gt     lt  li gt   lt  ul gt    This looks easy and a very common behavior  however  and since carousel-controls  as well as carousel indicators  event handlers are delegated to the document object  the click event on these elements  prev next controls       will be    ignored         ul dropdown-menu mega-dropdown-menu   on  click   function event          The event won t be propagated up to the document NODE and         therefore delegated events won t be fired     event stopPropagation          Relying on Twitter Bootstrap dropdown hide hidden events is not a solution for the following reasons    The provided event object for both event handlers does not give reference to the clicked element I don t have control over the dropdown menu content so adding a flag class or attribute is not possible   This fiddle is the normal behavior and this fiddle is with event stopPropagation   added   Update  Thanks to Roman for his answer  I also found an answer that you can find below

User · Answer

Like for instance Bootstrap 4 Alpha has this Menu Event  Why not use       PREVENT INSIDE MEGA DROPDOWN     dropdown-menu   on  click bs dropdown   function  e        e stopPropagation        e preventDefault

User · Answer

I know there already is a previous answer suggesting to use a form but the markup provided is not correct ideal  Here s the easiest solution  no javascript needed at all and it doesn t break your dropdown  Works with Bootstrap 4    lt form class  dropdown-item  gt          lt  -- Your elements go here -- gt   lt  form gt

User · Answer

body   on  click     dropdown-menu   function  e          this  parent   is   open    amp  amp  e stopPropagation          This may work for any conditions

User · Answer

I ve found none of the solutions worked as I would like using default bootstrap nav   Here is my solution to this problem             document  on  hide bs dropdown   function  e            if    e currentTarget activeElement  hasClass  dropdown-toggle                  e relatedTarget  parent   removeClass  open              return true                    return false

User · Answer

body   on  click     dropdown-menu   function  e          this  parent   is   show    amp  amp  e stopPropagation

User · Answer

Instead of writing some javascript or jquery code reinventing the wheel   The above scenario can be managed by bootstrap auto-close option  You can provide either of the values to auto-close    always -  Default  automatically closes the dropdown when any of its elements is clicked  outsideClick - closes the dropdown automatically only when the user clicks any element outside the dropdown  disabled - disables the auto close   Take a look at the following plunkr    http   plnkr co edit gnU8M2fqlE0GscUQtCWa p preview  Set  uib-dropdown auto-close  disabled     Hope this helps

User · Answer

I tried this simple thing and it worked like a charm    I changed the dropdown-menu element from  lt div gt  to  lt form gt  and it worked well    lt div class  nav-item dropdown   gt     lt a href  javascript    class  nav-link dropdown-toggle  data-toggle  dropdown  gt     Click to open dropdown   lt  a gt    lt form class  dropdown-menu     gt     lt ul class  list-group text-black  gt        lt li class  list-group-item    gt        lt  li gt        lt li class  list-group-item     gt        lt  li gt     lt  ul gt   lt  form gt       x000D   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt script src  https   cdnjs cloudflare com ajax libs popper js 1 14 7 umd popper min js  gt  lt  script gt  x000D   x000D   lt script src  https   stackpath bootstrapcdn com bootstrap 4 3 1 js bootstrap min js  gt  lt  script gt  x000D   x000D   x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   x000D   lt div class  nav-item dropdown   gt  x000D     lt a href  javascript    class  nav-link dropdown-toggle  data-toggle  dropdown  gt  x000D     Click to open dropdown x000D    lt  a gt  x000D    lt form class  dropdown-menu     gt  x000D     lt ul class  list-group text-black  gt  x000D        lt li class  list-group-item    gt  x000D        List Item 1 x000D        lt  li gt  x000D        lt li class  list-group-item     gt  x000D           LI 2 lt input class  form-control    gt  x000D        lt  li gt  x000D        lt li class  list-group-item     gt  x000D          List Item 3 x000D        lt  li gt  x000D     lt  ul gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

I ve got a similar problem recently and tried different ways to solve it with removing the data attribute data-toggle  dropdown  and listening click with event stopPropagation   calling   The second way looks more preferable  Also Bootstrap developers use this way  In the source file I found initialization of the dropdown elements      APPLY TO STANDARD DROPDOWN ELEMENTS   document   on  click bs dropdown data-api   clearMenus   on  click bs dropdown data-api     dropdown form   function  e    e stopPropagation       on  click bs dropdown data-api   toggle  Dropdown prototype toggle   on  keydown bs dropdown data-api   toggle  Dropdown prototype keydown   on  keydown bs dropdown data-api     dropdown-menu   Dropdown prototype keydown    jQuery     So  this line    on  click bs dropdown data-api     dropdown form   function  e    e stopPropagation        suggests you can put a form element inside the container with class  dropdown to avoid closing the dropdown menu

User · Answer

I did it with this     element  on        mouseenter   function event              event currentTarget  data  mouseover   true               mouseleave   function event              event currentTarget  data  mouseover   false               hide bs dropdown   function  event            return    event currentTarget  data  mouseover

User · Answer

With Angular2 Bootstrap  you can use nonInput for most scenarios    lt div dropdown autoClose  nonInput  gt       nonInput -  default  automatically closes the dropdown when any of its elements is clicked     as long as the clicked element is not an input or a textarea    https   valor-software com ng2-bootstrap   dropdowns

User · Answer

The absolute best answer is to put a form tag after the class dropdown-menu  so your code is   lt ul class  dropdown-menu  gt     lt form gt       lt li gt         lt div class  menu-item  gt bla bla bla lt  div gt       lt  li gt     lt  form gt   lt  ul gt

User · Answer

I just add onclick event like below to not close dropdown-menu    lt div class  quot dropdown-menu dropdown-menu-right quot  onclick  quot event stopPropagation   quot  aria-labelledby  quot triggerId quot  gt

User · Answer

You need to add  hold-on-click  to  dropdown-menu  class

User · Answer

This should help as well    document  on  click    someyourContainer  dropdown-menu   function  e      e stopPropagation

User · Answer

I know this question was specifically for jQuery  but for anyone using AngularJS that has this problem you can create a directive that handles this       angular module  app   directive  dropdownPreventClose   function         return           restrict   A           link  function scope  element  attrs              element on  click   function e                e stopPropagation      prevent the default behavior of closing the dropdown-menu                                      Then just add the attribute dropdown-prevent-close to your element that is triggering the menu to close  and it should prevent it   For me  it was a select element that automatically closed the menu    lt div class  dropdown-menu  gt     lt select dropdown-prevent-close name  myInput  id  myInput  ng-model  myModel  gt       lt option value    gt Select Me lt  option gt     lt  select gt   lt  div gt

User · Answer

Bootstrap 4      dropdown-menu data-handledropdownclose  true     on  click bs dropdown   function  e        if    this  parent   hasClass  show              var target     e target            if    target hasClass  CloseDropDown      target parents   CloseDropDown   length                 e stopPropagation                          lt div class  dropdown  gt       lt button type  button  class  btn-no-border dropdown-toggle  data-toggle  dropdown  gt           lt img src    Content CSS CssImages Icons usr icon png  alt    title  language  class  float-right    gt       lt  button gt        lt div class  dropdown-menu profile-menu-logout  data-handledropdownclose  true  gt           lt div class  prof-name  gt               lt i class  fa fa-user  gt  lt  i gt  Hello World          lt  div gt            lt hr   gt            lt div gt               lt a href   Test TestAction  class  CloseDropDown  gt                   lt i class  fa fa-briefcase  gt  lt  i gt                   lt span gt Test Action lt  span gt               lt  a gt           lt  div gt            lt div gt               lt nav gt                   lt ul class  nav-menu-prof padding-0  gt                       lt li class  menu-has-children  gt                           lt a href     gt                               lt span class  cyan-text-color  gt                                  Test 2                              lt  span gt                           lt  a gt                            lt ul id  ulList  class  padding-0 pad-left-25  gt                               lt li gt                                   lt a href   Test Test2  class  action currentmenu  gt  Test 1  lt  a gt                                   lt a href   Test Test2  class  action CloseDropDown  gt  Test 2  lt  a gt                               lt  li gt                           lt  ul gt                       lt  li gt                   lt  ul gt               lt  nav gt           lt  div gt            lt div gt               lt a href   Account Logout  class  cyan-text-color CloseDropDown  gt                   lt i class  fa fa-power-off  gt  lt  i gt                   lt span gt Logout lt  span gt               lt  a gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

This might help       dropdownmenuname   click function e      e stopPropagation

User · Answer

demo  http   jsfiddle net 4y8tLgcp          ul nav navbar-nav   on  click bs dropdown   function e       var  a      e target   is a    a is   is a        if  a hasClass  dropdown-toggle                   ul dropdown-menu   this  toggle  is a            a toggleClass  is a    is a            on  mouseleave   function           ul dropdown-menu  this  hide            is a   this  removeClass  is a          i have updated it once again to be the smartest and functional as possible  it now close when you hover outside the nav  remaining open while you are inside it  simply perfect

User · Answer

Bootstrap provides the following function                      This event is fired immediately when the hide instance method  hide bs dropdown   has been called  The toggling anchor element is available as the                     relatedTarget property of the event   Therefore  implementing this function should be able to disable the dropdown from closing       myDropdown   on  hide bs dropdown   function  e        var target     e target       if target hasClass  keepopen      target parents   keepopen   length           return false     returning false should stop the dropdown from hiding       else          return true

User · Answer

You could simply execute event stopPropagation on click event of the links themselves  Something like this           dropdown-menu a   click  event    gt             event stopPropagation            let url   event target href            Do something with the url or any other logic you wish          Edit  If someone saw this answer and is using react  it will not work  React handle the javascript events differently and by the time your react event handler is being called  the event has already been fired and propagated  To overcome that you should attach the event manually like that  handleMenuClick event       event stopPropagation      let menu item   event target      implement your logic here    componentDidMount         document getElementsByClassName  dropdown-menu   0  addEventListener           click   this handleMenuClick bind this   false

User · Answer

Bootstrap 4 Alpha 6  Rails  For rails developer  e stopPropagation   will lead to undesirable behavior for link to with data-method not equal to get since it will by default return all your request as get    To remedy this problem  I suggest this solution  which is universal      dropdown  dropdown-menu   on  click bs dropdown   function       return     dropdown   one  hide bs dropdown   function         return false               x000D   x000D      dropdown  dropdown-menu   on  click bs dropdown   function     x000D    return     dropdown   one  hide bs dropdown   function     x000D      return false  x000D        x000D      x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 css bootstrap min css  integrity  sha384-rwoIResjU2yc3z8GV NPeZWAv56rSmLldC3R AZzGRnGxQQKnKkoFVhFQhNUwEyJ  crossorigin  anonymous  gt  x000D   lt script src  https   code jquery com jquery-3 1 1 slim min js  integrity  sha384-A7FZj7v d sdmMqp nOQwliLvUsJfDHW k9Omg a EheAdgtzNs3hpfag6Ed950n  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs tether 1 4 0 js tether min js  integrity  sha384-DztdAPBWPRXSA 3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 js bootstrap min js  integrity  sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk 02D9phzyeVkE jo0ieGizqPLForn  crossorigin  anonymous  gt  lt  script gt  x000D   x000D   lt ul class  nav navbar-nav  gt  x000D     lt li class  dropdown mega-dropdown  gt  x000D       lt a href  javascript    class  dropdown-toggle  data-toggle  dropdown  gt  x000D         lt i class  fa fa-list-alt  gt  lt  i gt  Menu item 1 x000D         lt span class  fa fa-chevron-down pull-right  gt  lt  span gt  x000D       lt  a gt  x000D       lt ul class  dropdown-menu mega-dropdown-menu  gt  x000D         lt li gt  x000D           lt div id  carousel  class  carousel slide  data-ride  carousel  gt  x000D             lt ol class  carousel-indicators  gt  x000D               lt li data-slide-to  0  data-target   carousel  gt  lt  li gt  x000D               lt li class  active  data-slide-to  1  data-target   carousel  gt  lt  li gt  x000D             lt  ol gt  x000D             lt div class  carousel-inner  gt  x000D               lt div class  item  gt  x000D                 lt img alt    class  img-rounded  src  img1 jpg  gt  x000D               lt  div gt  x000D               lt div class  item active  gt  x000D                 lt img alt    class  img-rounded  src  img2 jpg  gt  x000D               lt  div gt  x000D             lt  div gt  x000D             lt a data-slide  prev  role  button  href   carousel  class  left carousel-control  gt  x000D               lt span class  glyphicon glyphicon-chevron-left  gt  lt  span gt  x000D             lt  a gt  x000D             lt a data-slide  next  role  button  href   carousel  class  right carousel-control  gt  x000D               lt span class  glyphicon glyphicon-chevron-right  gt  lt  span gt  x000D             lt  a gt  x000D           lt  div gt  x000D         lt  li gt  x000D       lt  ul gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

The simplest working solution for me is    adding keep-open class to elements that should not cause dropdown closing and this piece of code do the rest        dropdown   on  click   function e        var target     e target       var dropdown   target closest   dropdown        return  dropdown hasClass  open       target hasClass  keep-open

User · Answer

In  dropdown content put the  keep-open class on any label like so       dropdown   on  click   function  e        var target     e target       var dropdown   target closest   dropdown        if  target hasClass  keep-open                dropdown  addClass  keep-open          else             dropdown  removeClass  keep-open                 document  on  hide bs dropdown   function  e        var target     e target       if    target  is   keep-open              return false             The previous cases avoided the events related to the container objects  now  the container inherits the class keep-open and check before being closed

User · Answer

You can go through the below code to solve this    x000D   x000D    document  on  click bs dropdown data-api     keep it open   function  e    x000D    e stopPropagation    x000D      x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 4 0 css bootstrap min css  rel  stylesheet   gt  x000D   lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D       lt script src  https   cdnjs cloudflare com ajax libs popper js 1 12 9 umd popper min js  gt  lt  script gt  x000D     lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 4 0 css bootstrap min css  gt  x000D     lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D     lt script src  https   maxcdn bootstrapcdn com bootstrap 3 4 0 js bootstrap min js  gt  lt  script gt  x000D   x000D   x000D   lt div class  dropdown keep it open  gt  x000D           lt button class  btn btn-primary dropdown-toggle  type  button  data-toggle  dropdown  gt Dropdown Example x000D           lt span class  caret  gt  lt  span gt  lt  button gt  x000D           lt ul class  dropdown-menu  gt  x000D             lt li gt  lt a href     gt HTML lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt CSS lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt JavaScript lt  a gt  lt  li gt  x000D           lt  ul gt  x000D         lt  div gt  x000D   x000D   x000D

User · Answer

document  click function  event         target     event target       if   target closest   DivdropFilterListItemsCustomer   length    1                DivdropFilterListItemsCustomer   addClass  dropdown-menu show                  else               DivdropFilterListItemsCustomer   removeClass  dropdown-menu             show   addClass  dropdown-menu              DivdropFilterListItemsCustomer is id of drop down    Show id and drop down   1    A2ZCode

User · Answer

Bootstrap has solved this problem themselves in their support for  lt form gt  tags in dropdowns  Their solution is quite graspable and you can read it here  https   github com twbs bootstrap blob v4-dev js src dropdown js  It boils down to preventing propagation at the document element and doing so only for events of type  click bs dropdown data-api  that match the selector   dropdown  your-custom-class-for-keep-open-on-click-elements    Or in code    document  on  click bs dropdown data-api     dropdown  keep-open-on-click    event    gt        event stopPropagation

User · Answer

function     var closeble   false     body   on  click   function  e        if     event target  is  a dropdown-toggle              closeble   false                 dropdown   on        click   function event            if    event target  closest   dropdown-toggle   length                closeble   true            else               closeble   false                        hide bs dropdown   function             return closeble

User · Answer

You can stop click on the dropdown from propagating and then manually reimplement the carousel controls using carousel javascript methods      ul dropdown-menu mega-dropdown-menu   on  click   function event        event stopPropagation            a left   click function              carousel   carousel  prev            a right   click function              carousel   carousel  next            ol carousel-indicators li   click function  event        var index     this  data  slide-to            carousel   carousel index         Here is the jsfiddle

User · Answer

I also found a solution   Assuming that the Twitter Bootstrap Components related events handlers are delegated to the document object  I loop the attached handlers and check if the current clicked element  or one of its parents  is concerned by a delegated event      ul dropdown-menu mega-dropdown-menu   on  click   function event       var events      data document   events              events   events click            for var i   0  i  lt  events length  i              if events i  selector                   Check if the clicked element matches the event selector             if   event target  is events i  selector                     events i  handler call event target  event                                 Check if any of the clicked element parents matches the                 delegated event selector  Emulating propagation                event target  parents events i  selector  each function                    events i  handler call this  event                                       event stopPropagation      Always stop propagation       Hope it helps any one looking for a similar solution   Thank you all for your help

User · Answer

jQuery    lt script gt      document  on  click bs dropdown data-api     dropdown keep-inside-clicks-open   function  e        e stopPropagation           lt  script gt    HTML    lt div class  dropdown keep-inside-clicks-open  gt     lt button class  btn btn-primary dropdown-toggle  type  button  data-toggle  dropdown  gt       Dropdown Example      lt span class  caret  gt  lt  span gt     lt  button gt     lt ul class  dropdown-menu  gt       lt li gt  lt a href     gt HTML lt  a gt  lt  li gt       lt li gt  lt a href     gt CSS lt  a gt  lt  li gt       lt li gt  lt a href     gt JavaScript lt  a gt  lt  li gt     lt  ul gt   lt  div gt    Demo   Generic  https   jsfiddle net kerryjohnson omefq68b 1   Your demo with this solution  http   jsfiddle net kerryjohnson 80oLdtbf 101

User · Answer

You may have some problems if you use return false or stopPropagation   method because your events will be interrupted  Try this code  it s works fine     function             dropdown   on  click   function  e                    keep-open   removeClass  show                    dropdown-toggle   on  click   function                      keep-open   addClass  show                      closeDropdown    click function                 dropdown   closeDropdown                jQuery fn extend       closeDropdown  function             this addClass  show                removeClass  keep-open                click                addClass  keep-open                  In HTML    lt div class  dropdown keep-open  id  search-menu   gt       lt button  class  btn dropdown-toggle btn  btn-primary  type  button  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt       lt i class  fa fa-filter fa-fw  gt  lt  i gt        lt  button gt       lt div class  dropdown-menu  gt           lt button class  dropdown-item  id  opt1  type  button  gt Option 1 lt  button gt           lt button class  dropdown-item  id  opt2  type  button  gt Option 2 lt  button gt           lt button type  button  class  btn btn-primary closeDropdown  gt Close lt  button gt       lt  div gt   lt  div gt    If you want to close the dropdrown        search-menu   closeDropdown

User · Answer

For closing the dropdown only if a click event was triggered outside the bootstrap dropdown  this is what worked for me   JS file           createNewElement   on  click bs dropdown data-api     tags-btn-group keep-open-dropdown   function  e            var target     e target           if  target hasClass  dropdown-menu      target parents   dropdown-menu   length                e stopPropagation                        HTML file    lt  -- button  -- gt   lt div class  createNewElement  gt                   lt div class  btn-group tags-btn-group keep-open-dropdown  gt                        lt div class  dropdown-toggle  data-toggle  dropdown  aria-expanded  false  gt OPEN DROPDOWN lt  div gt                        lt ul class  dropdown-menu  gt                          WHAT EVER YOU WANT HERE                         lt  ul gt                    lt  div gt   lt  div gt

User · Answer

This helped me       dropdown-menu   on  click   function  e         if    this  parent   is   open               var target     e target            if  target hasClass  keepopen      target parents   keepopen   length                       return false                    else                      return true                                                    Your drop down menu element needs to be like this   take a note of the classes dropdown-menu and keepopen    lt ul role  menu  class  dropdown-menu topmenu-menu eserv top notifications keepopen  gt    The above code prevents biding on the whole  lt body gt   instead to the specfic element with the class dropdown-menu   Hope this helps someone   Thanks

User · Answer

In Bootstrap 4 you can also do this       dd-link   on  hide bs dropdown   onListHide   function onListHide e      if e clickEvent  amp  amp    contains e relatedTarget parentNode  e clickEvent target       e preventDefault           where  dd-link is the anchor element or button that has the data-toggle  drowndown  property

User · Answer

You can also use form tag  Example   lt div class  quot dropdown-menu quot  gt       lt form gt          Anything inside this wont close the dropdown           lt button class  quot btn btn-primary quot  type  quot button quot  value  quot Click me  quot   gt       lt  form gt       lt div class  quot dropdown-divider quot  gt  lt  div gt       lt a class  quot dropdown-item quot  href  quot   quot  gt Clik this and the dropdown will be closed lt  a gt       lt a class  quot dropdown-item quot  href  quot   quot  gt This too lt  a gt   lt  div gt   Source  https   getbootstrap com docs 5 0 components dropdowns  forms

User · Answer

I modified  Vartan s answer to make it work with Bootstrap 4 3  His solution doesn t work anymore with the latest version as target property always returns dropdown s root div no matter where the click was placed    Here is the code       dropdown-keep-open   on  hide bs dropdown   function  e      if   e clickEvent           There is no  clickEvent  property in the  e  object when the  button   or any other trigger  is clicked          What we usually want to happen in such situations is to hide the dropdown so we let it hide       return true         var target     e clickEvent target      return   target hasClass  dropdown-keep-open      target parents   dropdown-keep-open   length          lt div class  dropdown dropdown-keep-open  gt     lt button class  btn btn-secondary dropdown-toggle  type  button  id  dropdownMenuButton  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt      Dropdown button    lt  button gt     lt div class  dropdown-menu  aria-labelledby  dropdownMenuButton  gt       lt a class  dropdown-item  href     gt Action lt  a gt       lt a class  dropdown-item  href     gt Another action lt  a gt       lt a class  dropdown-item  href     gt Something else here lt  a gt     lt  div gt   lt  div gt

User · Answer

Removing the data attribute data-toggle  dropdown  and implementing the open close of the dropdown can be a solution   First by handling the click on the link to open close the dropdown like this       li dropdown mega-dropdown a   on  click   function  event          this  parent   toggleClass  open          and then listening the clicks outside of the dropdown to close it like this       body   on  click   function  e        if      li dropdown mega-dropdown   is e target            amp  amp     li dropdown mega-dropdown   has e target  length     0           amp  amp      open   has e target  length     0                    li dropdown mega-dropdown   removeClass  open                Here is the demo   http   jsfiddle net RomaLefrancois hh81rhcm 2

User · Answer

function             mega-dropdown   on  hide bs dropdown   function e            var  target     e target           return    target hasClass  keep-open       target parents   keep-open   size    gt  0                    mega-dropdown  gt  ul dropdown-menu   on  mouseenter   function               this  parent  li   addClass  keep-open          on  mouseleave   function               this  parent  li   removeClass  keep-open

[javascript] Avoid dropdown menu close on click inside

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to twitter-bootstrap-3

Examples related to drop-down-menu