當鼠標點擊列表時展開列表

-5

我已經使用列表項目創建了下拉菜單。當鼠標懸停時，列表正在擴展，但當鼠標單擊列表時應該展開，我需要做的。當鼠標點擊列表時展開列表

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測試編碼。請看這段代碼，並給我鼠標點擊事件的解決方案。

來源

2016-08-27 user2724379

點擊是JavaScript的區域。預計你至少試圖爲自己編碼。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，做出嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您嘗試過的以及爲什麼它不起作用。 –

您可以使用jQuery並將頂級事件應用到頂級li。喜歡的東西：

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

我並不完全相信你的HTML是什麼樣子，但這是一般的想法。您還需要想出一個關閉菜單的功能。互聯網上有大量資源用於編寫jQuery的示例和教程。

來源

2016-08-27 21:42:21 user1725382

當鼠標點擊列表時展開列表

回答

相關問題