Below are the script and style includes that I am using:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Stuff
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Stuff 1</a>
<a class="dropdown-item" href="#">Stuff 2</a>
<a class="dropdown-item" href="#">Stuff 3</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<a class="dropdown-item" href="#">Action1</a>
<a class="dropdown-item" href="#">Action 2</a>
<a class="dropdown-item" href="#">Action 3</a>
</div>
</div>The challenge I'm facing is that clicking between the dropdowns doesn't close the previously clicked dropdown. I observed that both show and open classes are added the first time a dropdown is clicked. The open class remains until I click on an element other than a dropdown.
I have noticed that the open class is not added in the examples on the bootstrap site.
I would like to maintain the click behavior, but also ensure that the menu closes when I click between two bootstrap dropdown elements.
Any assistance on this matter would be greatly appreciated. Thank you.