Question

我有一组3 <li>我需要更改每个 mouseenter ， mouseleave 和点击的类别

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

CODE：

$(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>

Answer 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的书籍，它会给你带来很多麻烦。

Answer 2

为什么你有一个文件。已经在另一个文件中。

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

    });
});

如果要在页面中添加两个document.ready函数。

你应该这样做

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

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

以及为什么你在这里使用两个document.ready函数............. ???

jQuery mouseenter + mouseleave +单击以更改3 <li> </li>的单独类/样式

2 个答案: