Скрыть div при загрузке страницы и показать при нажатии ссылки

Question

Я выбрал this simple code для выпадающего меню, и он работает до сих пор. Проблема в том, что при загрузке страницы отображается #drop меню, что явно не то, что мы хотим. Цель состоит в том, чтобы показать меню #drop при щелчке по ссылке #submenu, а не сразу.

Я изменил свой код ниже, потому что мне нужен элемент 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> 

и ваша проблема будет решена, когда падение загрузки страницы DIV будет скрыт, что вы можете использовать переключатель или показать команду в функции JQuery.

С уважением

Имран Касим

Answer 3

Поскольку вы не хотите, чтобы ваш элемент смещаться при первой загрузке страницы, почему бы не установить его visibilty на скрытый в HTML, как style="visbility:hidden" и назначить submenu link в функция прослушивателя действий и ссылается на этот элемент через getElementById и устанавливает видимость видимости. 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