Jquery Dropdown-Menü klicken Sie immer öffnen

Question

Ich habe ein Dropdown-Menü klicken, aber es hat ein wenig Seltsamkeit. Wenn ich auf das Dropdown-Menü der Schaltfläche klicke, wird das Dropdown-Menü angezeigt. Aber wenn ich meinen Cursor auf einem anderen verschieben (ohne die Schaltfläche Dropdown erneut auf), das Dropdown-Menü dissapear und es hat hoverable Dropdown-Menü nicht Drop-Down-Menü klicken (für mein schlechtes Englisch Leider) wird

Wie kann ich das Dropdown-Menü klicken immer erscheinen, wenn ich auf die Schaltfläche Dropdown klicken und den Cursor bewegen?

(Hier ist mein Code)

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

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

ohne den Code zu viel zu ändern, können Sie nur das entfernen Zeiger-Ereignisse (Klicks, et c) durch Zusatz:.

pointer-events:none; zu aside.sidebar ul li ul.dropdown_menu

und

pointer-events:auto; zu aside.sidebar ul li ul.dropdown_menu.active

Answer 2

Das hoverable Dropdown-Menü ist, weil Sie die Deckkraft-Eigenschaft auf 0 in Ihrem CSS gesetzt haben beiseite (dropdown_menu) . Sie müssen die Deckkraft ändern: 0 bis Deckkraft: 1. Hier ist der Code mit Fehlern:

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; 
} 

Ersetzen durch (feste Opazität):

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

Ich persönlich würde hover verwenden, anstatt click für ein Kind Menü. Lass mich wissen, wie es dir geht. Bleibt aktiv bis zum Ausklicken.

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; 
} 

In diesem Snippet arbeiten.

$(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>