JQuery скрыть не работает (НЕ IE) - PullRequest
Новая
       29

JQuery скрыть не работает (НЕ IE)

3 голосов
/ 22 июня 2010

jQuery сводит меня с ума. Я искал в интернете простой слайдер расширения категории, но не нашел его. Я попытался создать его здесь.

Проблема, с которой я столкнулся при попытке скрыть () элемент, ранее показанный () n. Если другой элемент является show () n до вызова hide (), вызов hide () для первого элемента игнорируется!

Простите за публикацию полного HTML-кода (пожалуйста, не стесняйтесь, предлагайте, где я буду размещать примеры кода целиком в будущем).

Если у кого-нибудь есть предложения по плагину jQuery или другой реализации того, что я пытаюсь сделать, пожалуйста, укажите мне в этом направлении - я рад использовать что-то уже сделанное. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $().ready(function() {
                $("ul.box_li li.parent").mouseenter(function(event){
                    event.stopPropagation();
                    $(this).children("ul:first").show('slide',{direction: 'left'});
                }).mouseleave(function(event){
                    event.stopPropagation();
                    $(this).children("ul:first").hide('slide',{direction: 'left'});
                });
            });
        </script>
        <style type="text/css">
            body {font-size:10pt;}
            ul.box_li li.parent {position:relative;}
            ul.box_li li {background-color:#e6e6e6;width:200px;border:1px solid red;list-style-type:none;padding:5px;}
            ul.box_li>li ul {display: none;position: absolute;top: 0;left: 100%;}
        </style>
    </head>
    <body>
        <ul class="box_li">
            <li class="parent">
                FIRST
                <ul>
                    <li class="parent">
                        FIRST_SUB_1
                        <ul>
                            <li>FIRST_SUB_1_SUB_1</li>
                            <li>FIRST_SUB_1_SUB_2</li>
                            <li>FIRST_SUB_1_SUB_3</li>
                            <li>FIRST_SUB_1_SUB_4</li>
                        </ul>
                    </li>
                    <li>FIRST_SUB_2</li>
                </ul>
            </li>
            <li class="parent">
                SECOND
                <ul>
                    <li>SECOND_SUB_1</li>
                    <li>SECOND_SUB_2</li>
                    <li>SECOND_SUB_3</li>
                    <li>SECOND_SUB_4</li>
                    <li>SECOND_SUB_5</li>
                    <li>SECOND_SUB_6</li>
                    <li>SECOND_SUB_7</li>
                    <li>SECOND_SUB_8</li>
                </ul>
            </li>
            <li class="parent">
                THIRD
            </li>
            <li class="parent">
                FOURTH
                <ul>
                    <li>FOURTH_SUB_1</li>
                    <li>FOURTH_SUB_2</li>
                    <li>FOURTH_SUB_3</li>
                    <li>FOURTH_SUB_4</li>
                    <li>FOURTH_SUB_5</li>
                    <li>FOURTH_SUB_6</li>
                    <li>FOURTH_SUB_7</li>
                    <li>FOURTH_SUB_8</li>
                </ul>
            </li>
            <li class="parent">
                FIFTH
                <ul>
                    <li>FIFTH_SUB_1</li>
                    <li>FIFTH_SUB_2</li>
                    <li>FIFTH_SUB_3</li>
                    <li>FIFTH_SUB_4</li>
                    <li>FIFTH_SUB_5</li>
                    <li>FIFTH_SUB_6</li>
                </ul>
            </li>
        </ul>
    </body>
</html>

1 Ответ

3 голосов
/ 22 июня 2010

Лучшее, что вы можете сделать здесь, это получить подобный эффект, например: 

$("ul.box_li li.parent").hover(function(){
    $(this).children("ul:first").animate({ width: 'toggle'});
});​

Вы можете посмотреть демо здесь , это из-за того, какЭффекты пользовательского интерфейса jQuery сами справляются с тем, что они действительно не следуют правилам очереди, посмотрите на источник slide эффекта : 

el.animate(animation, { queue: false, ....

Эти эффекты намеренно выходят за пределы нормальногоfx очередь анимации, хотя я не уверен, кто принял это решение, должно быть наоборот ... но это то, что вызывает вашу текущую проблему.Я предполагаю, что они явно предназначены для непрерывных операций, например, для закрытия диалога, смены вкладок и т. Д., Которые вы бы не называли .stop() в основном.

...