Home/ Questions/Q 874823
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T11:10:00+00:00

jQuery is driving me nuts. Ive looked around on the web for a simple

  • 0

jQuery is driving me nuts. Ive looked around on the web for a simple category expander slider but haven’t found one. Ive attempted to create one here.

The problem I’m having is when trying to hide() an element previously show()n. If another element is show()n before the hide() is called, the call to hide() for the first element is ignored!

Forgive me for posting the full HTML (please feel free to suggest where I should host entire code samples in future).

If anyone has any suggestions for a jQuery plugin or another implementation of what I’m trying to do, please point me in that direction – I’m happy to use something already made.

<!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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The best you can do here is get a similar effect, like this:

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

    You can view a demo here, it’s because of how the jQuery UI effects handle themselves that they don’t really follow queue rules correctly, look at the source for the slide effect:

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

    These effects are intentionally outside the normal fx animation queue, though I’m not sure who made that decision, should be the other way around…but it’s what’s causing your current issue. I’m guessing they’re explicitly intended for non-interruptible operations, e.g. a dialog going away, tab changes, etc…things you wouldn’t call .stop() on basically.

    • 0