JQuery подменю <li>исчезать в один за другим при наведении - PullRequest
Новая
       32

JQuery подменю <li>исчезать в один за другим при наведении

1 голос
/ 07 декабря 2011

У меня есть всплывающее подменю, в котором при наведении курсора мыши на родителя <li> каждый ребенок <li> появляется отдельно.И когда ваша мышь уходит, все может просто исчезнуть сразу.

Пока что я могу их постепенно отображать, используя действительно плохой код jQuery, но он срабатывает только один раз.И исчезновение никогда не работало.Это никогда не работало, когда у меня только всплывающее меню исчезало одновременно.

Вот оно в текущем состоянии: http://www.fixxed.net/test/pg/carousel/profiles.html

Вот код jQuery: 

$('#menu li').hover(
        function () {
            //show its submenu

            $('ul .1', this).hide().stop(true, true).fadeIn(700);
            $('ul .2', this).hide().stop(true, true).delay(300).fadeIn(700);
            $('ul .3', this).hide().stop(true, true).delay(600).fadeIn(700);
            $('ul .4', this).hide().stop(true, true).delay(900).fadeIn(700);
            $('ul .5', this).hide().stop(true, true).delay(1200).fadeIn(700);
            $('ul .6', this).hide().stop(true, true).delay(1500).fadeIn(700);

        }, 
        function () {
            //hide its submenu
            $('ul', this).stop(true, true).fadeOut(700);            
        }

Вот упрощенная версия HTML: 

<li class="about"><a href="#"></a>
       <ul>
            <li class="6"><a href="../paul-gregory-photography-bio.html">BIO</a></li>
            <li class="5"><a href="../paul-gregory-photography-clients.html">CLIENTS</a></li>
            <li class="4"><a href="#">THE SESSION</a></li>
            <li class="3"><a href="../paul-gregory-photography-pricing.html">Pricing</a></li>
            <li class="2"><a href="#">THINGS PAUL SAYS</a></li>
            <li class="1" style="padding-bottom:5px"><a href="#">Interview</a></li>
       </ul>
</li>

Я полагаю, что причина, по которой мышь не исчезает, связана с CSS.С CSS много чего происходит, так как это выпадающее меню вместо выпадающего, но здесь все это есть (кроме спрайтов): 

#menu li ul li a {
    display:block;
    text-decoration:none;
    text-align:left;
    width:100%;
    height:100%;
    background:#000;
}
#menu ul {
    padding:0;
    margin:0;
    list-style-type: none;
}
#menu ul li {
    float:left;
    position:relative;
    display:inline;
}
#menu ul li ul {
    visibility:hidden;
    position:absolute;
    color:#FFFFFF
}
#menu table {
    border-collapse:collapse;
    margin:0;
    padding:0;
    font-size:1em;
    margin:-1px;
}
#menu ul li:hover a, #menu ul li a:hover {
    color:#000;
}
#menu ul li:hover ul, #menu ul li a:hover ul {
    visibility:visible;
    bottom:26px;
    left:5px;
}
.display {
    display:block;
    width:150px;
    height: 18px;
    clear:both;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:14px;
    font-style:italic
}
#menu ul li:hover ul li, #menu ul li a:hover ul li {
    display:block;
    width:150px;
    height: 18px;
    clear:both;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:14px;
    font-style:italic
}
#menu ul li:hover ul li ul, #menu ul li a:hover ul li a ul {
    visibility:hidden;
    position:absolute;
}
#menu ul li:hover ul li a, #menu ul li a:hover ul li a {
    display:block;
    color:#DAC4AF;
    width:100%;
    padding-left:0px;
}
#menu ul li:hover ul li a:hover, #menu ul li a:hover ul li a:hover {
    color:#FFF;
}
#menu ul li:hover ul li:hover ul, #menu ul li a:hover ul li a:hover ul {
    visibility:visible;
    left:210px;
    bottom:0;
}
#menu ul li:hover ul li:hover ul li a, #menu ul li a:hover ul li a:hover ul li a {
    color:#000;
}
#menu ul li:hover ul li:hover ul li a:hover, #menu ul li a:hover ul li a:hover ul li a:hover {
    color:#000;
}
#menu ul li:hover ul.left, #menu ul li a:hover ul.left {
    left:-105px;
}
#menu ul li:hover ul li:hover ul.left, #menu ul li a:hover ul li a:hover ul.left {
    left:-210px;
    width:209px;
}
.menu li {
    text-indent:-9999px;
    display:inline;
    float:left;
    position:relative
}
.menu li a {
    background:url(assets/menu.png) no-repeat;
    width:100%;
    height:100%;
    display:block;
}

1 Ответ

1 голос
/ 07 декабря 2011

Проверьте эту скрипку

Несколько вещей изменились, но я думаю, что я буду иметь смысл, когда вы посмотрите на это. 

$("#fader").hide();     

    $('#menu li').hover(
        function () {
            //show its submenu
            $('ul',this).show() //Show the sub ul you hide in the mouse out
            $('ul .1', this).hide().stop(true, true).fadeIn(700);
            $('ul .2', this).hide().stop(true, true).delay(300).fadeIn(700);
            $('ul .3', this).hide().stop(true, true).delay(600).fadeIn(700);
            $('ul .4', this).hide().stop(true, true).delay(900).fadeIn(700);
            $('ul .5', this).hide().stop(true, true).delay(1200).fadeIn(700);
            $('ul .6', this).hide().stop(true, true).delay(1500).fadeIn(700);

        }, 
        function () {
            //hide its submenu
            $('ul', this).fadeOut(700);            
        }
    );

Причина, по которой вы не видели исчезновение, заключалась в том, что в вашем CSS вы явно отправили скрытое мышью. Поэтому я переписал это правило с помощью

. 
#menu ul li ul, #menu ul li:hover ul, #menu ul li a:hover ul {visibility:visible; bottom:26px; left:5px; display:none;}

Очевидно, нужна очистка, но я надеюсь, что это поможет

...