css 为什么下拉菜单不能平滑过渡？

gr8qqesn 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(142)

我已经尝试了几乎所有我能做的事情，所以我回到了这里。我发现了如何制作一个下拉菜单，但我如何使它过渡？如果还有其他建议，请让我知道你认为我应该改变什么。下面是代码：

$(document).on("click", ".menuButton", function () {
    $(".dropdown").toggleClass("visible");
  });

#menuDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .menuButton {
    text-align: center;
  }
  
  .dropdown {
    display: block;
    width: 100%;
    visibility: hidden;
    transition: visibility 300ms ease-in-out;
  }
  
  .visible {
    visibility: visible;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="index.js" defer></script>
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div id='menuDiv'>
        <button class='menuButton'>Menu <i class="fa-solid fa-angle-down"></i></button>
        <div id='dropdownmenu'>
          <button class='dropdown lunch'>Lunch</button>
          <button class='dropdown dinner'>Dinner</button>
          <button class='dropdown locations'>Locations</button>
        </div>
      </div>
</body>
</html>

css

来源：https://stackoverflow.com/questions/76544197/why-is-the-drop-down-menu-not-smooth-transitioning

1条答案

按热度按时间

ruarlubt1#

使用.slideToggle()方法。jQuery处理了CSS中的很多细节，所以你真正需要做的就是将display: none分配给下拉列表。顺便说一句，你的HTML有类：dropdownmenu，而jQuery的目标是：dropdown。.dropdown s的容器应该是切换方法、动画等的目标。

$(".menuButton").on("click", function(e) {
  $(this).next().slideToggle("slow");
  $(this).find("i").toggleClass("fa-rotate-180");
});

:root {
  font: 2ch/1.15 "Segoe UI"
}

main {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

button {
  font: inherit;
  font-size: 100%;
  font-variant: small-caps;
  cursor: pointer;
}

.menuButton {
  display: flex;
  justify-content: center;
  width: 10ch;
}

.dropDown {
  list-style: none;
  display: none;
  margin-left: -40px;
}

.dropDown>button {
  display: list-item;
  width: 100%;
}

.dropDown>button+button {
  margin-top: 8px;
}

i {
  display: block;
  margin: 0 -1ch 0 1ch;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="style.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>

<body>
  <main>
    <button class='menuButton'>Menu <i class="fa-solid fa-angle-up"></i></button>
    <menu class="dropDown">
      <button class='lunch'>Lunch</button>
      <button class='dinner'>Dinner</button>
      <button class='locations'>Locations</button>
    </menu>
  </main>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  <script src="index.js"></script>
</body>

</html>

赞(0）回复(0）举报 2023-06-25

我来回答

css 为什么下拉菜单不能平滑过渡？

1条答案

相关问题

热门标签

最新问答