加载页面时隐藏div，并在单击链接时显示(Hide div when the page is loaded and show when link is clicked)

加载页面时隐藏div，并在单击链接时显示(Hide div when the page is loaded and show when link is clicked)

我把这个简单的代码用于下拉菜单，它到目前为止工作。 问题是当我加载页面时，会显示#drop菜单，这显然不是我们想要的。 目标是在单击#submenu链接时显示#drop菜单，而不是立即显示.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>

I took this simple code for drop down menu and it's working so far. The problem is that when I load the page, #drop menu is displayed, which is obviously not what we want. The goal is to show the #drop menu when #submenu link is clicked, not immediately.

I modified my code below, because I need a div element, not a list.

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>

最满意答案

添加一些CSS：

#drop { display: none; }

Add some css:

#drop { display: none; }