Bootstrap 3: Open Dropdown on Hover When Another Dropdown Is Open

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>

Solution

You can integrate jQuery to your project for simple small behaviors like this and use svetle for everything else since you are too far in a project to migrate to svetlestrap... jQuery is lightweight and can be integrated with a simple script tag in a html so I guess this is the least wrong solution

 $(document).ready(function() {
var isAnyDropdownOpen = false; // Track if any dropdown is open

// Modify the behavior of the dropdowns based on hover events
$('.navbar .dropdown').hover(
    function() {
        // Only open on hover if another dropdown is already open
        if (isAnyDropdownOpen) {
            $('.navbar .dropdown').removeClass('open');
            $(this).addClass('open');
        }
    }, function() {
        // Optional: decide if you want to auto-close on mouseleave
    }
);

// Detect opening of any dropdown
$('.navbar .dropdown').on('show.bs.dropdown', function() {
    isAnyDropdownOpen = true;
});

// Detect closing of dropdowns
$('.navbar .dropdown').on('hide.bs.dropdown', function() {
    // Check if this is the last one open before marking as none open
    if ($('.navbar .dropdown.open').length <= 1) {
        isAnyDropdownOpen = false;
    }
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!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>