javascript - 如何使 css 响应式 topnav 滑入和滑出

Question

我有这段来自 w3schools 的代码可以使用。它是一个响应式顶部导航，媒体查询 660px 上的 shriks，但是当我点击时，它没有天赋，它只是出现和消失。我怎样才能让它慢慢滑入和滑出？

javascript-

<script>
   function myFunction() {
    var x = document.getElementById("myTopnav");
   if (x.className === "topnav") {
    x.className += " responsive";
   } else {
    x.className = "topnav";
 }
   } 
   </script>

html

 <div class="topnav" id="myTopnav"  >  
 <b>
     <a href="javascript:void(0);" class="icon"   onclick="myFunction()">&#9778;      </a></b>
        <a href="index.php"><div class="ordinary">  Home </div></a>
         <a href="contact.php"><div class="ordinary">   About </div></a>
         <a href="faqs.php"><div class="ordinary">   FAQ </div></a>
         <a href="login.php"> <div class="butt">   Login </div></a>
         <a href="register_now.php"><div class="butt">   Register </div></a>
        </div>

css有点长，不过html和js可能就够了，提前致谢。

Answer 1

您可以通过多种方法实现这一目标。

使用 jQuery slideToggle 类 - 引用(http://api.jquery.com/slidetoggle/)

在您的情况下，这似乎是使用与类“.topnav”和“.responsive”关联的 CSS 发生的，因此您可以使用具有高度的 CSS 过渡效果来实现您的目标。因为我无法查看您的 CSS，所以我只能提供示例以供引用。例如 .topnav { -webkit-transition: .5s ease-in; }检查此链接(https://codepen.io/mubarik/pen/XagxeL)

HTML

<div class="topnav" id="myTopnav"  >
<b><a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9778;</a></b>
    <a href="index.php"><div class="ordinary">  Home </div></a>
    <a href="contact.php"><div class="ordinary">   About </div></a>
    <a href="faqs.php"><div class="ordinary">   FAQ </div></a>
    <a href="login.php"> <div class="butt">   Login </div></a>
    <a href="register_now.php"><div class="butt">   Register </div></a>
</div>

CSS

.topnav{ height : auto; transition: .5s ease-in;}
.topnav > a { display: block; overflow: hidden;}
.topnav:not(responsive) > a {max-height: 0;transition: .5s ease-in;}
.topnav.responsive > a {max-height: 20px; transition: .5s ease-in;}

JS

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    }else{
        x.className = "topnav";
    }
}