Issue
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;
justify-content: right;
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>Solution
Dude Check if this is working for you.
.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;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dropdown</title>
<!-- CSS -->
<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">
</head>
<body>
<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>
<!-- Js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>Answered By - Upendra Nath Dubey
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.