I have a couple of Bootstrap 3 (have to use it for reasons out of my control) Dropdowns within a navbar that I would like to behave like an application menu. Normally, the dropdowns open on click, but if any of the other dropdowns is currently open, they should also open on hover.
Bonus: A solution that integrates nicely with Svelte, which I use as my front-end framework.
Below is an example. Dropdown 1 should open on hover if Dropdown 2 is open, and vice versa.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bootstrap 3 Dropdowns</title><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></head><body><nav class="navbar navbar-default navbar-static-top"><div class="container"><ul class="nav navbar-nav"><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown 1 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action 1</a></li><li><a href="#">Another action 1</a></li></ul></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown 2 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action 2</a></li><li><a href="#">Another action 2</a></li></ul></li></ul></div></nav><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></body></html>