클릭시 메뉴 드롭 다운을 만들 수있는 방법

Question

마우스를 가져 가면 내 메뉴를 드롭 다운 할 수 있습니까? .logo를 클릭하고 ul 드롭 다운이 가능하도록하고 싶습니다. 메뉴를 다시 클릭하면 숨길 수도 있습니다. div 내부의 .logo는 아래를 가리키는 삼각형입니다.

html 코드 :

<div id='Logo_dropdown'> 
<ul> 
    <li class='logo'><a href='#'><div></div></a></li> 
     <ul> 
     <li><a href='#upload'><span>Upload Logo</span></a></li> 
     <li><a href='#Edit'><span>Edit Logo</span></a></li> 
</ul> 
</div> 

CSS 코드 : CSS로 처리에는 클릭 이벤트가 없기 때문에 당신이 자바 스크립트를 사용해야합니다 클릭에 대한

#Logo_dropdown ul { 

    padding: 0; 
    margin-left:auto; 
    margin-right:auto; 
    position:absolute; 
    top: 50%; 
    margin-top: -30px; 
    font-size:14px;} 
#Logo_dropdown li { 
    margin: 0; 
    padding: 0;} 

#Logo_dropdown a { 
    margin: 0; 
    padding: 0; 
} 
#Logo_dropdown ul { 
    list-style: none; 
} 
#Logo_dropdown a { 
    text-decoration: none; 
} 
#Logo_dropdown { 
    height: 50px; 
    position:absolute ; 
    background: #FCFCFC; 
    font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif; 
    font-size: 12px; 
    left:200px; 
    opacity:0.9; 
filter:alpha(opacity=90); 
    padding-left:1%; 
       padding-right:auto; 
       width: 190px; 

/* background-color:#F3F3F3 ; /*color for Nav Menu Bar 
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);*/ 
    width: 140px; 
    z-index:1; 
    } 
#Logo_dropdown > ul > li { 
    float: left; 
    position: relative; 
    left:140px;} 

#Logo_dropdown > ul > li > a { 
    color: #999; 
    font-family: Verdana, 'Lucida Grande'; 
    font-size: 12px; 
    line-height: 70px; 
    padding: 15px 20px; 
    -webkit-transition: color .15s; 
    -moz-transition: color .15s; 
    -o-transition: color .15s; 
    transition: color .15s; 

} 
#Logo_dropdown > ul > li > a:hover { 
    color:#2bafb8; /*color nav menu bar when mouse hovers*/ 

} 
#Logo_dropdown > ul > li > ul { 
    opacity: 0; 
    visibility: hidden; 
    padding: 16px 0 20px 0; 
    background-color: #fafafa; 
    text-align: left; 
    position: absolute; 
    top: 55px; 
    left: 80%; 
    margin-left: -90px; 
    width: 250px; 
    -webkit-transition: all .3s .1s; 
    -moz-transition: all .3s .1s; 
    -o-transition: all .3s .1s; 
    transition: all .3s .1s; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); 
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); 
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); 
    width:100px; 


} 
#Logo_dropdown > ul > li:hover > ul { 
    opacity: 1; 
    top: 95px; /*position of hover li*/ 

    z-index:1; 
    overflow: visible; 
} 
#Logo_dropdown > ul > li > ul:before { 
    content: ''; 
    display: block; 
    border-color: transparent transparent #fafafa transparent; 
    border-style: solid; 
    border-width: 10px; 
    position: absolute; 
    top: -20px; 
    left: 50%; 
    margin-left: -10px; 

} 
#Logo_dropdown > ul ul > li { 
    position: relative; 
    overflow: visible; 

} 
#Logo_dropdown ul ul a { 
    color: #2bafb8; 
    font-family: Verdana, 'Lucida Grande'; 
    font-size: 13px; 
    background-color: #fafafa; 
    padding: 5px 8px 7px 16px; 
    display: block; 
    -webkit-transition: background-color 0.1s; 
    -moz-transition: background-color 0.1s; 
    -o-transition: background-color 0.1s; 
    transition: background-color 0.1s; 
} 
#Logo_dropdown ul ul a:hover { 
    background-color: #f0f0f0; 
} 


#Logo_dropdown ul ul a:hover { 
    background-color: #2bafb8; 
    color: #f0f0f0 !important; 
} 
div{ 
width: 0; 
height: 0; 
border-left: 20px solid transparent; 
border-right: 20px solid transparent; 
border-top: 20px solid #CCC; 

} 

Answer 1

당신은 드롭 다운 :

내가 .logo 클릭 할 수 있도록하려면를 볼 수 단순히 toggle()을 사용하고 UL 드롭 다운을

사용이있을 수 있습니다 :

$('.logo').click(function() { 
    $('#logodropdown ul.second').toggle(); 
} 

이렇게하면 숨겨진 경우 표시되고 보이는 경우 숨 깁니다. 원한다면 일부 속도를 설정할 수도 있습니다 (복식 내 toggle(time in milliseconds)).

코드가 접근법을 잘못 이해하고 #logodropdown에서 두 목록을 모두 숨길 수 있으므로 두 번째 ul을 <ul class="second">으로 변경하십시오. 이것은 당신이 원하는 일에 대한 좋은 접근 방법입니다! 또는 클래스를 사용하여 두 목록을 구분할 수도 있습니다.

:active 또는 :focus과 같은 것들을하기 위해 CSS를 사용할 수 있습니다. 그러나 그들은 다른 요소들의 속성에 변화를 일으키지 않을 것입니다. 여기서 jQuery의 도움이 필요합니다. :)

Answer 2

.