jQuery mouseenter + mouseleave + щелкните, чтобы изменить отдельный класс / стиль 3 <li> - PullRequest
Новая
       19

jQuery mouseenter + mouseleave + щелкните, чтобы изменить отдельный класс / стиль 3 <li>

0 голосов
/ 15 сентября 2011

У меня есть набор 3 <li>, который мне нужен, чтобы изменить класс каждого на mouseenter , mouseleave и click .

Пока все работает, кроме того, когда я нажимаю, 3-й <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>

Ответы [ 2 ]

1 голос
/ 15 сентября 2011

Вот полная 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, прежде чем продолжитьработа, это избавит вас от многих головных болей.

0 голосов
/ 15 сентября 2011

почему у вас один документ уже внутри другого 

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

    });
});

, если вы хотите добавить две функции document.ready на странице.

Вы должны сделать это так 

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

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

а также, почему вы используете две функции document.ready здесь ............. ???

...