Question

ul li:HOVER ul {
display: block;
opacity: 1;
visibility: visible;
}

以上是我的代码。但我希望在点击该列表时自动显示ul。

以下是我的完整代码：

<ul>
     <li><img src="${context:layout/images/images.png}" id="list_image"/>
        <ul>
            <li><div id="list_name">First</div></li>
            <li><div id="list_name">Second</div></li>
            <li><div id="list_name">Third</div></li>
        </ul>
     </li>
</ul>

脚本：
$（文件）。就绪（函数（）{ $（ul li）.click（function（）{ $（本）.find（＆＃39; UL＆＃39;）toggleClass。（＆＃39;慢＆＃39;）; }） }）;

3.css：

ul 
{
display: inline;
list-style: none;
width: 100%; padding: 0px; margin: 0px;height: 30px;float: left;
} 

ul li
{
display: inline-block; list-style: none; width: 100%; padding: 0px;
margin: 0px; 
height: 30px; float: left;
position: relative;
}
#list_image
{
height:20px; width:20px;margin-left: 35%; margin-right: 35%; margin-
bottom: 5px; margin-top: 5px;
}
#list_name
{
height: 20px;padding-top: 5px;
}
ul li:hover {
background: #6B6B6B;
} 

ul li:ACTIVE ul {
display: block;
opacity: 1;
visibility: visible;
}
ul li ul {
padding: 0;
position: absolute;
top: 30px;
right:0;
width: 125px;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li { 
background: #6B6B6B;
display: block; 
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background:#404040;}

Answer 1

$(document).ready(function(){
    $('ul li').click(function(){
        $(this).find('ul').toggleClass('show');
    })
});

上面的脚本会在第二级菜单中添加一个CSS类'show'，并在第二次单击时删除该类。

=============================================== ========================

我已检查过您的更新问题

发现您的后续CSS正在弄乱下拉菜单

ul li:ACTIVE ul {
  display: block;
  opacity: 1;
  visibility: visible;
{

我删除了CSS，并更新了ul li ul的CSS，因为它们包含太多隐藏的CSS，

现在使用类切换脚本，并添加了用于显示菜单的css。请自行添加转换效果。

DEMO 此处。

如何制作，在下拉菜单后单击按钮将自动进入

1 个答案: