javascript - 加载页面时隐藏 div，单击链接时显示

Question

我拿了this simple code用于下拉菜单，到目前为止它正在工作。问题是当我加载页面时，显示#drop menu，这显然不是我们想要的。目标是在单击 #submenu 链接时显示 #drop 菜单，而不是立即显示。

我修改了下面的代码，因为我需要一个 div 元素，而不是一个列表。

js

$(document).ready( function(){

    $('#submenu').click( function(event){
        event.stopPropagation();
        $('#drop').toggle();
    });

    $(document).click( function(){
        $('#drop').hide();
    });

});

html

<a href="#" id = "submenu">Products</a>
   <div id = "drop" >
     DROP DOWN MENU
   </div>

Answer 1

添加一些CSS:

#drop { display: none; }