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的示例和教程，互联网上有大量资源。

鼠标单击列表时展开列表

1 个答案: