0

我有一组 3 个<li>，我需要在mouseenter、mouseleave和click上更改每个的类。

到目前为止一切正常，除了当我点击时，第三个<li>不会停留在mouseenter状态。它消失了。

单击此处查看到目前为止的工作方式

代码：

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

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

});

CSS：

.name,.perm-name { color:#454444; }
.title,.perm-title { color:#930303; }
.award,.perm-award { color:#454444; font-size:11px;}

HTML：

<div id="list">

          <ul>
            <li>THE KILLERS.</li>
            <li>WHEN WE WERE YOUNG</li>
            <li class="hidden">(2006 Grammy Nominated, Best Long Form Video of the Year)</li>
      </ul>                
        <ul>       
            <li>COMMON.</li>
            <li>TESTIFY</li>
            <li class="hidden">(2005 Music Award Nominated, Director of the Year)</li></
        </ul>         
      <ul>
            <li>DURAN DURAN.</li>
            <li>FALLING DOWN extended version</li>
            <li class="hidden">(2008 Music Award Nominated, Video of the Year)></li>
        </ul>            
        <ul>
            <li>ARTFUL DODGER.</li>
            <li>short film</li>
            <li class="hidden">(2004 Music Award Nominated, Director of the Year)></li>
        </ul>

 </div>
4

2 回答 2

1

这是一个完整的 HTML 页面，其中包含您正在寻找的功能：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        ul li a {
            text-decoration: none;
            color: #999;
        }

        ul li a:hover,
        ul li a.selected {
            color: #454444;
        }

        ul li a:hover > span,
        ul li a.selected > span {
            color: #930303;
        }

        ul li a > span.hidden {
            display: none;
            font-size: 11px;
            color: #999;
        }

        ul li a:hover > span.hidden,
        ul li a.selected > span.hidden {
            display: inline;
        }
        </style>


        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript">
        $(function() {
            $("ul li a").click(function() {
                $("ul li a").removeClass("selected");
                $(this).addClass("selected");
            });
        });
        </script>
    </head>
    <body>
        <ul>
            <li>
                <a href="#">
                    THE KILLERS.
                    <span>When We Were Young</span>
                    <span class="hidden">(2006 Grammy Nominated, Best Long Form Video of the Year)</span>
                </a>
            </li>
            <li>
                <a href="#">
                    COMMON.
                    <span>Testify</span>
                    <span class="hidden">(2005 Music Award Nominated, Director of the Year)</span>
                </a>
            </li>
            <li>
                <a href="#">
                    DURAN DURAN.
                    <span>FALLING DOWN extended version</span>
                    <span class="hidden">(2008 Music Award Nominated, Video of the Year)</span>
                </a>
            </li>
            <li>
                <a href="#">
                    ARTFUL DODGER.
                    <span>short film</span>
                    <span class="hidden">(2004 Music Award Nominated, Director of the Year)</span>
                </a>
            </li>
        </ul>
    </body>
</html>

你不是在寻找太多的 jQuery——在继续你的工作之前你应该看看一些关于 HTML 和 CSS 的书，它会为你省去很多麻烦。

于 2011-09-15T06:13:17.473 回答
0

为什么你有一个文件。在另一个文件中准备好

$(function(){
    $(".hidden").hide();
$(function(){

    });
});

如果你想在 page 中添加两个 document.ready 函数。

你应该这样做

$(function(){
   //your code
});

$(function(){
   //your code
});

还有你为什么在这里使用两个 document.ready 函数............

于 2011-09-15T04:34:02.373 回答