Bootstrap - dropdown menu not working

Question

My dropdown menu in Bootstrap doesnt appear to be working - can anyone alert me to the problem  Right now it displays the dropdown  but clicking it does nothing  Thanks   JS     document  ready  function         dropdown-toggle   dropdown          HTML    lt div class  navbar navbar-fixed-top  gt       lt div class  navbar-inner  gt           lt div class  container  style  width  auto   gt                lt a class  brand  style  text-indent  3em  href     gt                  Title              lt  a gt                lt ul class  nav  gt                   lt li gt  lt a href     gt Profile lt  a gt  lt  li gt                   lt li class  active  gt  lt a href     gt Statistics lt  a gt  lt  li gt                   lt li gt  lt a href     gt Reader lt  a gt  lt  li gt                    lt li class  dropdown  id  menu1  gt                       lt a class  dropdown-toggle  data-toggle  dropdown  href   menu1  gt                      Options                      lt b class  caret  gt  lt  b gt                       lt  a gt                       lt ul class  dropdown-menu  gt                           lt li gt  lt a href     gt Action lt  a gt  lt  li gt                           lt li gt  lt a href     gt Another action lt  a gt  lt  li gt                           lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt                           lt li class  divider  gt  lt  li gt                           lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt                       lt  ul gt                   lt  li gt                lt  ul gt             lt  div gt       lt  div gt   lt  div gt

User · Answer

Double importing jquery can cause Error

<script src="static/public/js/jquery/jquery.min.js"></script>

OR

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="" crossorigin="anonymous"></script>

User · Answer

This is a Rails specific answer  but I had this same problem with Bootstrap dropdown menus in my Rails app  What fixed it was adding this to app assets javascripts application js       require bootstrap  Hope that helps someone

User · Answer

you are missing the  btn btn-navbar  section  For example            lt a class  btn btn-navbar  data-toggle  collapse  data-target   nav-collapse  gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt           lt  a gt    Take a look to navbar documentation in   Twitter Bootstrap

User · Answer

If you are using electron or other chromium frame  you have to include jquery within window explicitly by    lt script language  javascript  type  text javascript  src  local path jquery js  onload  window     window jQuery   module exports   gt  lt  script gt

User · Answer

If I am getting you correctly  when you say that clicking does nothing  do you mean that it does not point to your URL   In the anchor tag  lt a href gt it looks like you did not pass your file path to the href attribute  So  replace the   with your actual path for the file that you want to link    lt li gt  lt a href     gt Action lt  a gt  lt  li gt   lt li gt  lt a href  action link here  gt Another action lt  a gt  lt  li gt   lt li gt  lt a href  something else link here  gt Something else here lt  a gt  lt  li gt   lt li class  divider  gt  lt  li gt   lt li gt  lt a href  seperated link here  gt Separated link lt  a gt  lt  li gt    I hope this helps with your issue

User · Answer

I had a similar problem  The version of bootstrap js that visual studio seems to be hosed  I just pointed to this URL instead        lt link id  active style  rel  stylesheet  href    netdna bootstrapcdn com bootswatch 3 1 1 cosmo bootstrap min css  gt    For completeness  here s the HTML and javascript   lt ul class  nav navbar-nav navbar-right  gt                       lt li id  theme selector  class  dropdown  gt                           lt a href     class  dropdown-toggle  data-toggle  dropdown  gt Theme  lt b class  caret  gt  lt  b gt  lt  a gt                           lt ul id  theme  class  dropdown-menu  role  menu  gt                               lt li gt  lt a href     gt Amelia lt  a gt  lt  li gt                               lt li gt  lt a href     gt Cerulean lt  a gt  lt  li gt                               lt li gt  lt a href     gt Cyborg lt  a gt  lt  li gt                               lt li gt  lt a href     gt Cosmo lt  a gt  lt  li gt                               lt li gt  lt a href     gt Darkly lt  a gt  lt  li gt                               lt li gt  lt a href     gt Flatly lt  a gt  lt  li gt                               lt li gt  lt a href     gt Lumen lt  a gt  lt  li gt                               lt li gt  lt a href     gt Simplex lt  a gt  lt  li gt                               lt li gt  lt a href     gt Slate lt  a gt  lt  li gt                               lt li gt  lt a href     gt Spacelab lt  a gt  lt  li gt                               lt li gt  lt a href     gt Superhero lt  a gt  lt  li gt                               lt li gt  lt a href     gt United lt  a gt  lt  li gt                               lt li gt  lt a href     gt Yeti lt  a gt  lt  li gt                           lt  ul gt                       lt  li gt                   lt  ul gt    Javascript      theme li   click function                alert  item        this  text             switch style   this  text               Hope it helps someone

User · Answer

putting    lt script src  js bootstrap min js  gt  lt  script gt        file at the last after the    lt script src  jq jquery-2 1 1 min js  gt  lt  script gt   solved this problem for me     this is how i use write it now and no problem     lt script src  jq jquery-2 1 1 min js  gt  lt  script gt   lt script src  js bootstrap min js  gt  lt  script gt

User · Answer

I had to download the source files instead of just the compressed files that it says to use for quick start on the bootstrap website

User · Answer

Check if you re referencing jquery js BEFORE bootstrap js and bootstrap js is loaded only once  That fixed the same error for me    lt script type  text javascript  src  js jquery-1 8 0 js  gt  lt  script gt   lt script type  text javascript  src  js bootstrap min js  gt  lt  script gt

User · Answer

When i checked i saw display  none  value is in the  dropdown-menu bootstrap css class  Hence i removed it

User · Answer

put following code in your page     Sys WebForms PageRequestManager getInstance   add endRequest EndRequest       function EndRequest sender  args            if  args get error      undefined                dropdown-toggle   dropdown

[html] Bootstrap - dropdown menu not working?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap