I have 3 bootstrap drop down elements. The first 2’s toggle are not being controlled by jquery but the 3rd one is getting hidden and shown using jquery. Now the problem is when I click on the first 2 dropdown buttons their menus will show aligned correctly but the 3rd one has problems. The first problem it has is that its menu won’t show on the first click when you click it the second time the menu will show. The second problem it has is, the position of the menu of the 3rd dropdown is not right. It appears on the wrong position but once you scroll on the body the position gets fixed. I did some debugging and found out that when removing the other 2 drop down elements the 3rd dropdown works fine and the second problem is fixed. I don’t get what the problem is all I did is control its toggle with jquery. How can I fix these problems? Thanks in advance.

$(function() {
  $(".account button").click(function() {
    $(".account .dropdown-menu").toggle();
  });
});
.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 4%;
  width: 100%;
  height: 20vh;
  background-color: gold;
}

.header .dropdown {
  border: none;
}

.header .dropdown button:focus {
  box-shadow: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<div class="header">
  <div class="dropdown">
    <button class="btn btn-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item switchProfile">option 1</a></li>
      <li><a class="dropdown-item myAccount">option 2</a></li>
      <li><a class="dropdown-item logOut">option 3</a></li>
    </ul>
  </div>
  <div class="dropdown">
    <button class="btn btn-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item switchProfile">option 1</a></li>
      <li><a class="dropdown-item myAccount">option 2</a></li>
      <li><a class="dropdown-item logOut">option 3</a></li>
    </ul>
  </div>
  <div class="dropdown account">
    <button class="btn btn-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fa-solid fa-user"></i>
                    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item switchProfile">option 1</a></li>
      <li><a class="dropdown-item myAccount">option 2</a></li>
      <li><a class="dropdown-item logOut">option 3</a></li>
    </ul>
  </div>
</div>

No need to add that JavaScript code. Check it will work properly without that.

1

Check this Example transform: translate(0px, 40px) add in this class header .dropdown.account ul it is working fine now.

$(function() {
  $(".account button").click(function() {
    $(".account .dropdown-menu").toggle();
  });
});
.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 4%;
  width: 100%;
  height: 20vh;
  background-color: gold;
}

.header .dropdown {
  border: none;
}

.header .dropdown button:focus {
  box-shadow: none;
}

.header .dropdown.account ul{
      transform: translate(0px, 40px) !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<div class="header">
  <div class="dropdown">
    <button class="btn btn-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item switchProfile">option 1</a></li>
      <li><a class="dropdown-item myAccount">option 2</a></li>
      <li><a class="dropdown-item logOut">option 3</a></li>
    </ul>
  </div>
  <div class="dropdown">
    <button class="btn btn-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item switchProfile">option 1</a></li>
      <li><a class="dropdown-item myAccount">option 2</a></li>
      <li><a class="dropdown-item logOut">option 3</a></li>
    </ul>
  </div>
  <div class="dropdown account">
    <button class="btn btn-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fa-solid fa-user"></i>
                    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item switchProfile">option 1</a></li>
      <li><a class="dropdown-item myAccount">option 2</a></li>
      <li><a class="dropdown-item logOut">option 3</a></li>
    </ul>
  </div>
</div>

Then you can add this CDN. It will solve the issue.

<script
   src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous">
</script>