Javascript下拉菜单不会向下滑动

Javascript Drop Down Menu Won't Slide Down

本文关键字：下拉菜单 Javascript      更新时间：2023-09-26

我正在开发一个下拉菜单，基本上有两个项目;我的设计工作和我的开发工作。请记住，这是针对网页设计课程的。

在其中一个要求中，我们需要设计一个"很酷的下拉菜单"。我在下面有设置菜单的 HTML。

    <div class="drop-down" align="center">
    <div class="design"><br><br><a href="http://corymeeks.tk/design.php"><p>Design</p></a></div>
    <div class="development"><br><br><a href="http://corymeeks.tk/design.php"><p>Development</p></a></div>
    </div>

我的Javascript如下所示

   $(document).ready(function(){                    
   $(".drop-down").hide();                      
   $(".drop-down-button").click(function(){ 
       $(".drop-down").slideDown("active");         
   });                                          
});

我正在让下拉菜单工作，但无论出于何种原因，当 JS 加载时，下拉菜单都会立即弹出。这与我没有将 hide（） 的"下拉列表"强制到 show（） 有关吗？

再一次，对不起n00b问题。

在我的示例中，您的代码运行良好。也许你在javascript中有一个你没有注意到的错误。也许你忘了包含jQuery？

$(document).ready(function(){                    
   $(".drop-down").hide();    
    
    var isDroppedDown = false;
    
   $(".drop-down-button").click(function(){ 
       
       if(isDroppedDown){
           $(".drop-down").slideUp("active");     
           isDroppedDown = false;
       }else{
           $(".drop-down").slideDown("active");  
           isDroppedDown = true;
       }
       
       
   });                                          
}); 
.drop-down
{
    background-color: #8787cc;
    display: none;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="drop-down-button">Drop it!</div>
<div class="drop-down" align="center">
    <div class="design"><br><br><a href="http://corymeeks.tk/design.php"><p>Design</p></a></div>
    <div class="development"><br><br><a href="http://corymeeks.tk/design.php"><p>Development</p></a><br><br></div>
</div>

相关文章：