Question

我正在开发一个下拉菜单，主要包含两个项目;我的设计工作和我的开发工作。请记住，这适用于网页设计课程。

在其中一项要求中，我们需要设计一个很酷的下拉菜单。＆＃34;我在下面的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加载时，下拉菜单会立即弹出。这与我有什么关系，而不是强迫＆＃34;下拉＆＃34;从hide（）到show（）？

再一次，抱歉n00b问题。

Answer 1

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

＆＃13;

$(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;
       }
       
       
              
   });                                          
});

＆＃13;

.drop-down
{
    background-color: #8787cc;
    display: none;  
}

＆＃13;

<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>

＆＃13;

Javascript下拉菜单不会向下滑动

1 个答案: