Question

我选择了this simple code下拉菜单，到目前为止它正在运行。问题是当我加载页面时，会显示#drop菜单，这显然不是我们想要的。目标是在点击#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; }

Answer 2

只需将此代码放入您的下拉列表中。

 <a href="#" id = "submenu">Products</a>

 <div id = "drop" style="display:none;">

  DROP DOWN MENU

 </div>

并且当您隐藏页面加载drop div时，您的问题将得到解决，您可以在jquery函数中使用切换或show命令。

此致

Imran Qasim

Answer 3

由于您不希望在首次加载页面时移动元素，为什么不将其可见性设置为隐藏在html中，如style="visbility:hidden"，并指定submenu link一个动作侦听器通过getElementById函数和引用此元素，并将其可见性设置为visible。 document.getElementbyId("dropDownMenu").style.visibility = "visible"

Answer 4

如果您不想使用css，那么可以使用jquery来完成。

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


<scitpt type="text/javascipt">
    $(document).ready( function(){
      $('#drop').hide();

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

    });

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

   })
 </script>

Fiddle

加载页面时隐藏div，并在单击链接时显示

4 个答案: