リストをマウスでクリックするとリストを展開します

Question

リスト項目を使用してドロップダウンメニューを作成しました。マウスを動かすとリストが拡大していますが、マウスをクリックしてリストを展開する必要があります。

CSS：

.top-level 
{ 
background:#999; 
width:100%; 
line-height: 25px; 
} 
.top-level li 
{ 
border-bottom: #fff solid; 
border-top: #fff solid; 
border-width: 1px;  
} 
.top-level li:hover 
{ 
background: white; 
text-decoration: none; 
} 
.top-level li:hover >ul 
{ 
background: white; 
text-decoration: none; 
display :inline ; 
} 
.second-level 
{    
background:#999; 
width:100%; 
line-height: 25px;  
list-style: none; 
display: none; 
} 
.second-level > li 
{  
display: inline-block;   
border-bottom: #fff solid; 
border-top: #fff solid; 
border-width: 1px; 
background:#999;  
} 
.second-level > li:hover 
{ 
background: #fff; 
text-decoration: none; 
} 
.second-level li:hover >ul 
{ 
background: white; 
text-decoration: none; 
display :inline ; 
} 

HTML：

<ul class="top- 
level">                 
    <li> <span>Test - A</span> 
    <ul class="second-level"> 
     <li> <span>Test - A1</span></li> 
     <li> <span>Test - A2</span> 
     <ul class="second-level"> 
      <li> <span>Test - A21</span></li> 
      <li> <span>Test - A21</span></li> 
      <li> <span>Test - A21</span></li> 
      <li> <span>Test - A21</span></li> 
     </ul> 
     </li> 
     <li> <span>Test - A3</span></li> 
     <li> <span>Test - A4</span></li> 
     <li> <span>Test - A5</span></li> 
    </ul> 
    </li> 
    <li> <span>Test - B</span></li> 
    <li> <span>Test - C</span></li> 
    <li> <span>Test - D</span></li> 
</ul> 

は、上記のCSSやHTMLのための私のテスト符号化です。このコードを見て、マウスクリックイベントの解決策を教えてください。

Answer 1

jQueryを使用して、トップレベルのliにクリックイベントを適用できます。 何かのように：

$('.top-level').on ('click', function(){ 
$('.top-level > li').css ('display', 'block'); 
}); 

私はあなたのHTMLがどのように見えるか、まったくわからないが、これは一般的な考え方です。 また、メニューを閉じる機能が必要になります。 jQueryを書くための例とチュートリアルについては、インターネット上に多くのリソースがあります。