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（ここに私のコードです）、あなただけ削除することができますポインタイベント（クリック数、等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から不透明度：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>