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

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

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

jquery html-lists mouseenter addclass mouseleave
person rod    schedule 15.09.2011    source источник
comment
Кроме того, вы должны подумать об использовании .end(), затем .first(), .next(), .last() и т. д.   -  person Oscar Godson    schedule 15.09.2011

Ответы (2)


arrow_upward
1
arrow_downward

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

person rekamoyka    schedule 15.09.2011
comment
Алек, можете ли вы придумать какую-либо причину, по которой это не будет работать на iPad только после того, как я добавлю class=selected к первому ‹li›? Мне нужно, чтобы первая ‹li› отображалась выбранной. Работает во всех браузерах, кроме iDevices. - person rod; 03.11.2011
comment
Предполагая, что вы вообще не изменили CSS... CSS, который я написал, использует выбранный класс для ссылок (то есть для элемента <a>). Если вы предпочитаете, чтобы это было в элементе <li>, вам нужно сначала внести некоторые быстрые изменения CSS и jQuery. - person rekamoyka; 03.11.2011

arrow_upward
0
arrow_downward

почему у вас есть один document.ready внутри другого

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

    });
});

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

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

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

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

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

person Kanishka Panamaldeniya    schedule 15.09.2011
comment
Ответ: Потому что я не знаю, что делаю. - person rod; 15.09.2011
comment
вы можете добавить этот код в одну функцию $.ready. тебе не нужно два - person Kanishka Panamaldeniya; 15.09.2011