将css悬停转换为jquery onclick for div layer

Question

我们有一个标题，上面有用户名。基本上，就目前而言，用户在那里悬停用户名并且不稳定地将鼠标移动到div以保持焦点，并访问不同的帐户功能。

但说实话，这是废话，我想把它转换为onclick，ala google风格。

这是我们所拥有的剧本。

这是我想要实现的目标。

想知道是否有人知道如何做到这一点。

示例小提琴：http://jsfiddle.net/ozzy/WkLBF/

基本上，我想要它，以便用户点击名称和div面板显示并保持不变，直到他们再次点击。

任何帮助表示赞赏，如果有任何安慰，我们会使用jquery（此演示目前根本不使用javascript）

Answer 1

嗯......这对你所描述的情况有效，但我不确定这正是你想要的。 ：P你能解释一下吗？

Demo

$(".category-filter>li").click(function(){
    $(this).children("ul").toggle();
});

Answer 2

http://jsfiddle.net/WkLBF/25/

使用Javascript：

jQuery(document).ready(function($){
    $('ul li a').live('click', function(){
        if($('.category-filter>li:hover>ul').css('display')=='none')
        {
            $('.category-filter>li:hover>ul').css('display', 'block');
            $(this).addClass('userbox-on');
        }
        else
        {
            $('.category-filter>li:hover>ul').css('display', 'none');
            $(this).removeClass('userbox-on');
        }
    });
});

CSS：

.userbox-on
{
  border: 1px solid red;
  border-bottom: none;  
  background-color: #fff;
    padding: 5px;
}