如何将hover更改为onclick

Question

这是一个悬停菜单，但我想将其更改为onclick菜单？

<div id='cssmenu'>
    <ul>
        <li class='has-sub'><a href='#'><span>Users</span></a>
            <ul>
                 <li class='has-sub'><a href='#'><span>All</span></a>
                    <ul>
                       <li><a href='#'><span>All Registered Users</span></a></li>
                    </ul>
                 <li class='has-sub'><a href='#'><span>Admin</span></a>
              </ul>
           </li>
        </ul>
    </div>

Answer 1

你的CSS会像

li.has-sub ul{
   display: none;
}
li.has-sub:hover ul{
    display: block;
    width: 120px;
    float: left;
}
li.has-sub ul li {
    display: inline-block;
    width: 120px;
    text-align: left;
}

您可以删除

的display：block

li.has-sub:hover ul

使用jQuery

使其可见

$('li.has-sub').click(function(){
   if(!$(this).next('ul').is(':visible')){
       $(this).next('ul').show();
   }else{
       $(this).next('ul').hide();
   }
});