Jquery 드롭 다운 메뉴를 항상 클릭하십시오.

Question

드롭 다운 메뉴 클릭을 만들었지 만 조금 이상합니다. 버튼 드롭 다운을 클릭하면 드롭 다운 메뉴가 나타납니다. (다시 버튼 드롭 다운을 클릭하지 않고) 내가 다른 내 커서를 이동하지만, 드롭 다운 메뉴를 사라지게하고 그것은 (내 나쁜 영어 죄송합니다) hoverable 드롭 다운 메뉴를하지 드롭 다운 메뉴를 클릭이되었다

어떻게 내가 버튼 드롭 다운을 클릭하고 커서를 이동할 때 드롭 다운 메뉴를 클릭 항상 표시 할 수 있습니다

?

너무 많은 코드를 변경하지 않고

aside.sidebar ul li ul.dropdown_menu { 
    opacity: 0; 
    visibility: hidden; 
    height: auto; 
    width: 100%; 
    margin-top: -1px; 
    position: absolute; 
    transition: all 0.5s; 
    border-left: 1px solid #2c3e50; 
    background-color: #34495e; 
} 
aside.sidebar ul li ul.dropdown_menu.active { 
    opacity: 1; 
    visibility: visible; 
    height: auto; 
    width: 100%; 
    background-color: #34495e; 
    left: 100%; 
    top: 0; 
    transition: all 0.5s; 
} 

jQuery를

$(document).ready(function() { 
     $(".button_dropdown").click(function() { 
      $(".dropdown_menu").toggleClass("active"); 
     }); 
     }); 

Answer 1

HTML

<aside class="sidebar"> 
     <ul> 
     <li><a href="#"><i class="material-icons">home</i>Homepage</a></li> 
     <li class="button_dropdown"><a href="javascript:void(0)" class="dropdown-toggle"><i class="material-icons">widgets</i>Events Organizer <i class="material-icons multi_menu">keyboard_arrow_right</i></a> 
      <ul class="dropdown_menu"> 
      <li><a href="#">Create Events</a></li> 
      <li><a href="#">List Events</a></li> 
      </ul> 
     </li> 
     <li><a href="#"><i class="material-icons">people</i>Peserta Events</a></li> 
     </ul> 
    </aside> 

CSS (여기 내 코드입니다), 당신은 단지를 제거 할 수 있습니다 포인터 이벤트 (클릭 수, et C)를 추가하여 :.

pointer-events:none;

및

pointer-events:auto; 당신이 옆으로 당신의 CSS에서 0으로 불투명도 속성을 설정하기 때문에 hoverable 드롭 다운 메뉴가 aside.sidebar ul li ul.dropdown_menu.active

Answer 2

-aside.sidebar ul li ul.dropdown_menu에 (dropdown_menu) . 불투명도를 0으로 변경해야합니다 (0 : 불투명도 : 1).

aside.sidebar ul li ul.dropdown_menu { 
    opacity: 0; 
    visibility: hidden; 
    height: auto; 
    width: 100%; 
    margin-top: -1px; 
    position: absolute; 
    transition: all 0.5s; 
    border-left: 1px solid #2c3e50; 
    background-color: #34495e; 
} 

(고정 불투명도)에 의해 교체 :

aside.sidebar ul li ul.dropdown_menu { 
    opacity: 1; 
    visibility: hidden; 
    height: auto; 
    width: 100%; 
    margin-top: -1px; 
    position: absolute; 
    transition: all 0.5s; 
    border-left: 1px solid #2c3e50; 
    background-color: #34495e; 
} 

Answer 3

개인적으로 하위 메뉴에 대한 hover보다는 click를 사용하는 것이 여기에 에러 코드입니다. 이걸 가지고 어떻게 가는지 알려주세요. 클릭 할 때까지 활성 상태를 유지합니다.

aside.sidebar ul li ul.dropdown_menu { 
    display: none; 
    height: auto; 
    width: 100%; 
    margin-top: -1px; 
    position: absolute; 
    transition: all 0.5s; 
    border-left: 1px solid #2c3e50; 
    background-color: #34495e; 
    left:200px; 
    top:0; 
} 

aside.sidebar ul li ul.dropdown_menu.active { 
    display: block !important; 
} 

이 스 니펫에서 작업하십시오.

$(document).ready(function() { 
 
    $('.button_dropdown').click(function() { 
 
    $('.dropdown_menu').toggleClass('active'); 
 
    }); 
 
});

aside.sidebar ul li ul.dropdown_menu { 
 
    display: none; 
 
    height: auto; 
 
    width: 100%; 
 
    margin-top: -1px; 
 
    position: absolute; 
 
    transition: all 0.5s; 
 
    border-left: 1px solid #2c3e50; 
 
    background-color: #34495e; 
 
    left:200px; 
 
    top:0; 
 
} 
 

 
aside.sidebar ul li ul.dropdown_menu.active { 
 
    display: block !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<aside class="sidebar"> 
 
    <ul> 
 
    <li>Homepage</li> 
 
    <li class="button_dropdown"><a href="javascript:void(0)" class="dropdown-toggle">Events Organizer</a> 
 
     <ul class="dropdown_menu"> 
 
     <li>Create Events</li> 
 
     <li>List Events</li> 
 
     </ul> 
 
    </li> 
 
    <li>Peserta Events</li> 
 
    </ul> 
 
</aside>