将css悬停类更改为jquery click答案

【问题标题】：change css hover class to jquery click将css悬停类更改为jquery click
【发布时间】：2013-03-09 15:41:06
【问题描述】：

我正在为网站创建菜单。我正在尝试更改悬停以单击链接上的效果。

当我将鼠标悬停在子菜单上时，必须更改菜单项。

这是代码

<li class="dropdown">
            <a href="#">item 1</a>
            <ul>
                <li><a href="#">subitem 1</a></li>
                <li><a href="#">subitem 2</a></li>
                <li><a href="#">subitem 3</a></li>
                <li><a href="#">subitem 4</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#">item 2</a>
            <ul>
                <li><a href="#">subitem 1</a></li>
                <li><a href="#">subitem 2</a></li>
                <li><a href="#">subitem 3</a></li>
                <li><a href="#">subitem 4</a></li>
            </ul>
        </li>

和css

.nav>li>a {
            position: relative;
            display: block;
            width: 150px;
            margin-left: -5px;
            padding: 10px 10px 10px 15px;
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
            letter-spacing: 1px;
            font-weight: 900;
            text-decoration: none;
            color: #383838;
}
.nav>li>a:hover, .nav>li:hover>a {
            color: white;
            width: 169px;
            height: 4px;
            background: -webkit-linear-gradient(bottom, #A30C0C, #C42D2D);
            background: -ms-linear-gradient(bottom, #A30C0C, C42D2D);
            background: -moz-linear-gradient(bottom, #A30C0C, C42D2D);
            background: -o-linear-gradient(bottom, #A30C0C, C42D2D);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',                         endColorstr='#f3f3f3',GradientType=0);
}

请帮帮我

【问题讨论】：

你有什么问题？
您想在子项悬停时更改主菜单项吗？
我最近在我的网站页面底部实现了一个下拉菜单，当鼠标悬停在它上面时可以展开...这是代码，一切都很好。但我很好奇如何将其更改为单击打开和关闭而不是鼠标悬停在它上面？

标签： jquery function css click hover

【解决方案1】：

你需要这样的东西吗：SAMPLE

$(".dropdown ul").hide();
$(".dropdown ul li").click(function(){
     $(this).parent().prev('a').html($(this).text());
});
$(".dropdown").hover(function(){
     $(this).find('ul').stop(true,true).slideDown('normal');
      }, function(){
     $(this).find('ul').stop(true,true).slideUp('normal');
});

【讨论】：