下拉對齊問題-有解無憂

我有 3 個引導下拉元素。第一個 2 的切換不受 jquery 控制，但第三個被隱藏并使用 jquery 顯示。現在的問題是，當我單擊前 2 個下拉按鈕時，它們的選單將顯示正確對齊，但第 3 個出現問題。它的第一個問題是，當您第二次單擊選單時，它的選單不會在第一次單擊時顯示。第二個問題是，第三個下拉選單的位置不對。它出現在錯誤的位置，但是一旦您在正文上滾動，該位置就會固定。我進行了一些除錯，發現當洗掉其他 2 個下拉元素時，第 3 個下拉選單作業正常，并且第二個問題已修復。我不明白問題是什么，我所做的就是用 jquery 控制它的切換。我該如何解決這些問題？提前致謝。

$(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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

uj5u.com熱心網友回復：

伙計，檢查這是否適合您。

.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/[email protected]/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/[email protected]/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>

uj5u.com熱心網友回復：

無需添加該 JavaScript 代碼。檢查它是否可以正常作業。

uj5u.com熱心網友回復：

在這個類中檢查這個示例transform: translate(0px, 40px)添加header .dropdown.account ul它現在作業正常。

$(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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

uj5u.com熱心網友回復：

然后你可以添加這個CDN。它將解決問題。

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

uj5u.com熱心網友回復：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p"
      crossorigin="anonymous"
    ></script>
<style>
.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;
}
</style>
<script>
$(document).ready(function(){
  $(".btn btn-secondary").click(function(){
    $(".dropdown-menu").toggle();
  });
});
</script>
</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>

</body>
</html>

檢查，它正在作業。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/493373.html

標籤：html jQuery css 引导程序 4

上一篇：jQuery點擊事件然后創建多組div

下一篇：ToastifyReact，嘗試使用時出錯