페이지가로드 될 때 div를 숨기고 링크를 클릭 할 때 표시합니다.

Question

나는 드롭 다운 메뉴에 this simple code을 가져 갔고 지금까지 작동합니다. 문제는 페이지를로드 할 때 # 드롭 메뉴가 표시된다는 것인데, 분명히 우리가 원하는 것은 아닙니다. 목표는 바로 #submenu 링크를 클릭 할 때 #drop 메뉴를 표시하는 것입니다.

아래 목록에서 div 요소가 필요하므로 아래 코드를 수정했습니다.

JS

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

Answer 1

일부 CSS를 추가

$(document).ready(function(){ 

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

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

}); 

HTML :

#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

당신은 당신의 요소가 페이지가 처음로드, 왜 style="visbility:hidden"처럼 HTML에 숨겨진에 공개 설정을 설정하고 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