如何實作下拉選單VanillaJSCSS-有解無憂

我一直在嘗試組合一個下拉選單，該選單會在單擊事件時向下滑動而不是“僅出現”。我試圖將過渡應用到下拉選單但沒有成功。幫助將不勝感激。我想找到一個同時使用 css 和 javascript 的解決方案。然后單擊按鈕時選單應具有下拉效果。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width">
    <!-- <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> -->
    <script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
  <div class="logo">
    <p id="logo">Logo</p>
    <button id="btn"><i class="fa-solid fa-bars"></i></button>
  </div>
   <nav class="nav">
     <ul class ="dropmenu" id="dropdown">
       <li><a href="contact.html" class="link">Link 1</a></li>
       <li><a href="#" class="link">Link 2</a></li>
       <li><a href="#" class="link" id="last">Link 3</a></li>
     </ul>
   </nav>
   <div class = input>
   <!-- <input type="checkbox" id="myCheckbox"> -->
  </div>
    <script src="script.js"></script>
  </body>
</html>

CSS 向#dropdown 應用了過渡，但沒有成功


body {
    height: 100vh;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.logo {
    display: block;
    text-align: left;
    background: #f8f9f9;
    height: 10vh;
}

.logo #logo {
    display: inline;
    line-height: 10vh;
    font-size: 1.6em;
    margin-left: 0.5em;
    color: #438ED9;
    
}

button#btn {
    display: inline;
    float: right;
    margin-right: 2em;
    margin-top: 0;
    margin-bottom: 0;
    border: none;
    background-color: #f8f9f9;
    padding: 0;
}

nav {
    display: block;
    background-color: #438ED9;
    width: 100vw;
    /**/
}

nav ul#dropdown {
    display: none;
    list-style-type: none;
    margin: 0; 
    padding-left: 0;
    box-shadow: none; 
    overflow-y: hidden;
    max-height: 21vh; /* approximate max height */

    transition-property: all;
    transition-duration: .5s
}


nav ul li {
    text-align: center; 
    
}



.link {
    display: block;
    color: white;
    font-size: 1.5em;
    background-color: #438ED9;
    text-decoration: none;
    width: 100vw;
    height: 7vh;
    line-height: 7vh;
    border-bottom: 2px solid black;
    text-align: center;
    
}

 #last {
    border-bottom: none;
}

.link:hover {
    background-color: blue;
}

.link:active {
    background-color: blue;
}

.visible {
    display: block !important;
}

.fa-bars:before, .fa-navicon:before {
    content: "\f0c9";
    font-size: 20px;
    line-height: 10vh;
}

.fa-solid .fa-bars:hover {
    color: red;
}
.fa-solid:active, .fa-bars:active {
    color: grey;
}

@media only screen and (min-width: 480px) { 
    
    .fa-bars:before, .fa-navicon:before {
        font-size: 30px;
    }

    /* #dropdown {
        display: block;
    } */

}
  
  @media only screen and (min-width: 600px) {

    .fa-bars:before, .fa-navicon:before {
        font-size: 30px;
    }

    nav ul {
        display: block;
        text-align: center;
        float: right;
        margin-right: 30px;
    }
    nav ul li {
        display: inline;
        text-align: center;
        padding: 0 10px;

    }
    #btn i {
        display: none;
    }

    nav {
        height: 7vh;
    }

    .link {
        display: inline;
        color: white;
        font-size: 1.2em;
        border-bottom: none;

    }
    .link:hover {
        background-color: #438ED9;
    }
    
    .link:active {
        background-color: #438ED9;
    }

    
}

document.querySelector("body").addEventListener("click", function(event){  
    let dropd = document.querySelector('#dropdown');
    if (!event.target.parentNode.matches('#btn')) {    
      dropd.classList.remove("visible");
    } else {
      dropd.classList.toggle("visible");
    }
  });

uj5u.com熱心網友回復：

您的代碼非常接近作業。要實作您提到的幻燈片效果，您可以使用transform: scaleY()使下拉選單展開：

    .nav {
      transform: scaleY(1);
      transform-origin: top;
      transition-property: transform;
      transition-duration: .5s;
    }

    .hide {
      transform: scaleY(0);
    }

有了它，您所要做的就是正確地切換hide要擴展的元素上的類。這是一個完整的作業示例：

function toggleDropdown() {
  toggleClass(document.getElementById('nav'), "hide");
}

var toggleClass = function(el, className) {
  if (el) {
    if (el.className.indexOf(className) != -1) {
      el.className = el.className.replace(className, '');
    } else {
      el.className  = ' '   className;
    }
  }
};

body {
  height: 100vh;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.logo {
  display: block;
  text-align: left;
  background: #f8f9f9;
  height: 10vh;
}

.logo #logo {
  display: inline;
  line-height: 10vh;
  font-size: 1.6em;
  margin-left: 0.5em;
  color: #438ED9;
}

button#btn {
  display: inline;
  float: right;
  margin-right: 2em;
  margin-top: 0;
  margin-bottom: 0;
  border: none;
  background-color: #f8f9f9;
  padding: 0;
}

nav {
  display: block;
  background-color: #438ED9;
  width: 100vw;
  /**/
}

nav ul#dropdown {
  list-style-type: none;
  margin: 0;
  padding-left: 0;
  box-shadow: none;
  overflow-y: hidden;
  max-height: 21vh;
  /* approximate max height */
  transition-property: all;
  transition-duration: .5s;
}

.nav {
  transform: scaleY(1);
  transform-origin: top;
  transition-property: transform;
  transition-duration: .5s;
}

.hide {
  transform: scaleY(0);
}

nav ul li {
  text-align: center;
}

.link {
  display: block;
  color: white;
  font-size: 1.5em;
  background-color: #438ED9;
  text-decoration: none;
  width: 100vw;
  height: 7vh;
  line-height: 7vh;
  border-bottom: 2px solid black;
  text-align: center;
}

#last {
  border-bottom: none;
}

.link:hover {
  background-color: blue;
}

.link:active {
  background-color: blue;
}

.visible {
  display: block !important;
}

.fa-bars:before,
.fa-navicon:before {
  content: "\f0c9";
  font-size: 20px;
  line-height: 10vh;
}

.fa-solid .fa-bars:hover {
  color: red;
}

.fa-solid:active,
.fa-bars:active {
  color: grey;
}

@media only screen and (min-width: 480px) {
  .fa-bars:before,
  .fa-navicon:before {
    font-size: 30px;
  }
  /* #dropdown {
        display: block;
    } */
}

@media only screen and (min-width: 600px) {
  .fa-bars:before,
  .fa-navicon:before {
    font-size: 30px;
  }
  nav ul {
    display: block;
    text-align: center;
    float: right;
    margin-right: 30px;
  }
  nav ul li {
    display: inline;
    text-align: center;
    padding: 0 10px;
  }
  #btn i {
    display: none;
  }
  nav {
    height: 7vh;
  }
  .link {
    display: inline;
    color: white;
    font-size: 1.2em;
    border-bottom: none;
  }
  .link:hover {
    background-color: #438ED9;
  }
  .link:active {
    background-color: #438ED9;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width">
  <!-- <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> -->
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
  <div class="logo">
    <p id="logo">Logo</p>
    <button id="btn" onClick="toggleDropdown()">Button</button>
  </div>
  <nav class="nav hide" id="nav">
    <ul class="dropmenu" id="dropdown">
      <li><a href="contact.html" class="link">Link 1</a></li>
      <li><a href="#" class="link">Link 2</a></li>
      <li><a href="#" class="link" id="last">Link 3</a></li>
    </ul>
  </nav>
  <div class=i nput>
    <!-- <input type="checkbox" id="myCheckbox"> -->
  </div>
  <script src="script.js"></script>
</body>

</html>

uj5u.com熱心網友回復：

您不能在顯示屬性上放置過渡，但可以將其設定為最大寬度。將下拉樣式更改為：

nav ul#dropdown {
    list-style-type: none;
    margin: 0; 
    padding-left: 0;
    box-shadow: none; 
    overflow-y: hidden;
    max-height: 0; /* approximate max height */

    transition-property: all;
    transition-duration: .5s
}

并將 .visibility 樣式更改為：

.visible {
max-height: 21vh !important; /* approximate max height */
}

uj5u.com熱心網友回復：

雖然@Andrew Hulterstrom 已經通過使用為您解決了這個問題，但scaleY我想向您展示 JS 代碼中的一些主要變化。我使用與 Andrew 相同的方法和代碼來解決它，只是將 JS 代碼簡化為一行。我沒有撰寫冗長復雜的代碼來實作if/else-statment，而是簡單地使用了以下classList.toggle函式：

function toggleDropdown() {
  document.querySelector('nav').classList.toggle('hide');
};

body {
  height: 100vh;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.logo {
  display: block;
  text-align: left;
  background: #f8f9f9;
  height: 10vh;
}

.logo #logo {
  display: inline;
  line-height: 10vh;
  font-size: 1.6em;
  margin-left: 0.5em;
  color: #438ED9;
}

button#btn {
  display: inline;
  float: right;
  margin-right: 2em;
  margin-top: 0;
  margin-bottom: 0;
  border: none;
  background-color: #f8f9f9;
  padding: 0;
}

nav {
  display: block;
  background-color: #438ED9;
  width: 100vw;
  /**/
}

nav ul#dropdown {
  list-style-type: none;
  margin: 0;
  padding-left: 0;
  box-shadow: none;
  overflow-y: hidden;
  max-height: 21vh;
  /* approximate max height */
  transition-property: all;
  transition-duration: .5s;
}

.nav {
  transform: scaleY(1);
  transform-origin: top;
  transition-property: transform;
  transition-duration: .5s;
}

.hide {
  transform: scaleY(0);
}

nav ul li {
  text-align: center;
}

.link {
  display: block;
  color: white;
  font-size: 1.5em;
  background-color: #438ED9;
  text-decoration: none;
  width: 100vw;
  height: 7vh;
  line-height: 7vh;
  border-bottom: 2px solid black;
  text-align: center;
}

#last {
  border-bottom: none;
}

.link:hover {
  background-color: blue;
}

.link:active {
  background-color: blue;
}

.visible {
  display: block !important;
}

.fa-bars:before,
.fa-navicon:before {
  content: "\f0c9";
  font-size: 20px;
  line-height: 10vh;
}

.fa-solid .fa-bars:hover {
  color: red;
}

.fa-solid:active,
.fa-bars:active {
  color: grey;
}

@media only screen and (min-width: 480px) {
  .fa-bars:before,
  .fa-navicon:before {
    font-size: 30px;
  }
  /* #dropdown {
        display: block;
    } */
}

@media only screen and (min-width: 600px) {
  .fa-bars:before,
  .fa-navicon:before {
    font-size: 30px;
  }
  nav ul {
    display: block;
    text-align: center;
    float: right;
    margin-right: 30px;
  }
  nav ul li {
    display: inline;
    text-align: center;
    padding: 0 10px;
  }
  #btn i {
    display: none;
  }
  nav {
    height: 7vh;
  }
  .link {
    display: inline;
    color: white;
    font-size: 1.2em;
    border-bottom: none;
  }
  .link:hover {
    background-color: #438ED9;
  }
  .link:active {
    background-color: #438ED9;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width">
  <!-- <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> -->
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
  <div class="logo">
    <p id="logo">Logo</p>
    <button id="btn" onClick="toggleDropdown()">Button</button>
  </div>
  <nav class="nav hide" id="nav">
    <ul class="dropmenu" id="dropdown">
      <li><a href="contact.html" class="link">Link 1</a></li>
      <li><a href="#" class="link">Link 2</a></li>
      <li><a href="#" class="link" id="last">Link 3</a></li>
    </ul>
  </nav>
  <div class=i nput>
    <!-- <input type="checkbox" id="myCheckbox"> -->
  </div>
  <script src="script.js"></script>
</body>

</html>

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

標籤：javascript html css 落下

上一篇：回圈遍歷布爾陣列以確定要包含在另一個陣列中的物件

下一篇：替換網頁輸入框中的文本