0

for some rerason my bootstrap dropdown menus have stopped working (previously they worked ok)

Ive loaded jquery first then bootstrap

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

and used this html (just to explore why the dropdown action stopped working)

<div class="btn-group">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Right-aligned menu
                </button>
                <div class="dropdown-menu dropdown-menu-right">
                    <button class="dropdown-item" type="button">Action</button>
                    <button class="dropdown-item" type="button">Another action</button>
                    <button class="dropdown-item" type="button">Something else here</button>
                </div>
            </div>

The button has no dropdown menu option,clicking it does nothing, im completely stumped as it was working previously so I can only assume some other javascript library or maybe even css is preventing it from working, so I tried to exclude all js libraries except jquery & bootstrap, but it still didnt work. Can anyone help ? thanks in advance

misuk
  • 133
  • 1
  • 15
  • You are using bootstrap 5 . Which firstly doesn't need jquery (https://getbootstrap.com/docs/5.0/getting-started/javascript/#still-want-to-use-jquery-its-possible), second it uses other attributes for dropdowns like `data-bs-toggle="dropdown"` . Check https://getbootstrap.com/docs/5.0/components/dropdowns/ . Or downgrade and use a stable version of bootstrap 4. Also check console for errors – Mihai T Jul 14 '21 at 08:39
  • I use JQuery so it needs to be loaded. There were no console errors, so basically nothing for me to go on – misuk Jul 14 '21 at 08:46
  • Then check the bs5 documentation because as i said in my comment, bs5 uses other attributes for it's components. Or use bs4 – Mihai T Jul 14 '21 at 08:47
  • I doubled checked my original html and it had data-toggle instead of data-bs-toggle, so I changed it and now it works, not sure why this happened but thank you so much for your help – misuk Jul 14 '21 at 08:52
  • Well it changed when they changed the bs version. This stuff happens when upgrading a plugin/package version. I know that having the ' latest ' version for everything seems ' cool ' but it comes at a price. It's called Maintenance :). Glad i could help. Happy coding. – Mihai T Jul 14 '21 at 08:55

0 Answers0