jQuery mouseover + mouseout + click 更改多个 (2) <li> css 类/样式答案

【问题标题】：jQuery mouseover + mouseout + click to change multiple (2) <li> css classes / stylingjQuery mouseover + mouseout + click 更改多个 (2) <li> css 类/样式
【发布时间】：2011-09-04 03:26:00
【问题描述】：

我有一个 <ul> 列表，其中包含 2 个 <li>，如下所示：

HTML：

<div id="list">
    <ul>
        <li>name1</li>
        <li>title1</li>
    </ul>

    <ul>        
        <li>name2</li>
        <li>title2</li>
    </ul>

    <ul>
        <li>name3</li>
        <li>title3</li>
    </ul>

    <ul>        
        <li>name4</li>
        <li>title4</li>
    </ul>
and so on...
</div>

CSS：

#list {color: grey}
.name {color: black}
.title {color: red}

输出如下所示（文本全为灰色）：

名称1 标题1
名称2 标题2
名称3 标题3
name4 标题4

当您鼠标悬停任何<ul>时，它的每个<li>都会应用一个类，看起来像这样（斜体是.name类，粗体是 .title 类）：

名称1 标题1
name2 title2
name3 title3 name4 标题4

当您鼠标移出时，它会返回。

此外，当您单击其中一个<ul> 时，它将保持鼠标悬停状态的样式并触发<a href="something">

最后，当页面第一次加载时，第一个 <ul> 必须是这样选择的：

name1 title1
名称2 标题2
名称3 标题3
name4 标题4

我只能完成其中一个功能，比如单击，但不能全部完成 3 个。我是 jQuery 新手，所以像这样的多个功能让我的大脑陷入了旋转。

如果能帮助我找到正确的方向，我将不胜感激。

【问题讨论】：

标签： jquery class html-lists styling

【解决方案1】：

以下应该做到这一点。如果您打算在其中添加 <a> 标记，可能需要进行一些小调整，但使用提供的 HTML 结构，这应该可以完成您所寻找的。p>

$(function(){
    $("#list ul li").hover(function(){
        $(this).parent().children().first().addClass('name');
        $(this).parent().children().last().addClass('title');
    },function(){
        $(this).parent().children().first().removeClass('name');
        $(this).parent().children().last().removeClass('title');               
    }).click(function(e){

        $(this).parent().children().first().addClass('perm-name');
        $(this).parent().children().last().addClass('perm-title');
    }); 
    $("#list ul li").first().trigger('mouseover');

});

和 CSS：

#list {color: grey}
.name,.perm-name {color: black}
.title,.perm-title {color: red}

工作example。

【讨论】：

感谢您的意见。它几乎可以解决问题，但是当您单击另一个 ul 时，之前单击的 ul 上的样式需要恢复为默认全灰色，以便任何时候只有一个 ul 处于选中状态。
通过在“点击”事件中添加几行代码，您可以使其工作。当前查找perm-name 和perm-title 元素并删除类：jsfiddle.net/marcosfromero/5c8qQ/8
感谢 Niklas 的所有帮助。第一个

【解决方案2】：

感谢 Niklas 的所有帮助。
第一个<ul> 仍处于“鼠标悬停”状态，因此我将代码修改为如下所示，一切正常！没有你我做不到。

$(function(){
    $("#list ul li").mouseenter(function(){
        $(this).parent().children().first().addClass('name');
        $(this).parent().children().last().addClass('title');
    }).mouseleave(function(){
        $(this).parent().children().first().removeClass('name');
        $(this).parent().children().last().removeClass('title');               
    }).click(function(e){
        $("#list ul li").first().trigger('mouseleave');
         $('.perm-name').removeClass('perm-name');
        $('.perm-title').removeClass('perm-title');
        $(this).parent().children().first().addClass('perm-name');
        $(this).parent().children().last().addClass('perm-title');

    }); 
    $("#list ul li").first().trigger('mouseenter');

【讨论】：