手风琴式导航在 mouseover/mouseleave 上打开和关闭 jQuery

发布于 2024-12-05 16:52:35 字数 15725 浏览 0 评论 0原文

我正在使用 jQuery 手风琴插件，我需要手风琴菜单的帮助，该菜单在 mouseover 上显示子菜单链接，但仅在将鼠标悬停在另一个主链接上后才关闭主链接。我希望当我将鼠标悬停在上方时显示子链接，但也希望在将鼠标移出主链接后隐藏子链接。
我将不胜感激你的帮助。请参阅下面的代码：

这是 HTML

    <head>
    <title>Accordion Test</title>
    
    <link rel="stylesheet" href="accordionDemo.css" />
    <script type="text/javascript" src="../lib/jquery.js"></script>
    <script type="text/javascript" src="../lib/chili-1.7.pack.js"></script>
    <script type="text/javascript" src="../lib/jquery.easing.js"></script>
    <script type="text/javascript" src="../lib/jquery.dimensions.js"></script>
    <script type="text/javascript" src="../jquery.accordion.js"></script>

    <script type="text/javascript">
    jQuery().ready(function(){
        // simple accordion with mouseover event
        jQuery('#navigation').accordion({
            active: false,
            header: '.head',
            navigation: true,
            event: 'mouseover',
            fillSpace: true,
            animated: 'easeslide'
        });
    });
    </script>
</head>
<body>
<div id="wrapper">
    


<div id="navBar">
            <ul id="navigation">
                <li>
                    <a class="head" href="?p=1">About SfT</a>
                    <ul>
                        <li><a href="?p=1.1">sub1</a></li>
                        <li><a href="?p=1.2">sub2</a></li>
                        <li><a href="?p=1.3">sub3</a></li>
                        <li><a href="?p=1.4.1">sub4</a></li>
                        <li><a href="?p=1.4.2">sub4.1</a></li>
                        <li><a href="?p=1.4.3">sub4.2</a></li>
                        <li><a href="?p=1.4.4">sub4.3</a></li>
                        <li><a href="?p=1.5">sub5</a></li>
                    </ul> 
                </li>
                <li>
                    <a class="head" href="?p=1.2">Your Life</a>
                    <ul>
                        <li><a href="?p=1.2.1">sub1</a></li>
                        <li><a href="?p=1.2.2">sub2</a></li>
                        <li><a href="?p=1.2.3">sub3</a></li>
                        <li><a href="?p=1.2.4">sub4</a></li>
                        <li><a href="?p=1.2.5">sub5</a></li>
                    </ul> 
                </li>
                <li>
                    <a class="head" href="?p=1.3">Your Health</a>
                    <ul>
                        <li><a href="?p=accordionTest2.html">sub1</a></li>
                        <li><a href="?p=1.3.3">sub2</a></li>
                        <li><a href="?p=1.3.4">sub3</a></li>
                        <li><a href="?p=1.3.5">sub4</a></li>
                        <li><a href="?p=1.3.6">sub5</a></li>
                    </ul> 
                </li>
                                <li>
                    <a class="head" href="?p=1.3">Your Call</a>
                    <ul>
                        <li><a href="?p=1.4.1">sub1</a></li>
                        <li><a href="?p=1.4.2">sub2</a></li>
                        <li><a href="?p=1.4.3">sub3</a></li>
                        <li><a href="?p=1.4.4">sub4</a></li>
                        <li><a href="?p=1.4.5">sub5</a></li>
                    </ul> 
                </li>

            </ul>
        </div>
    </div> <!--end wrapper-->   
    </body>
</html>

这是 CSS：

    * { margin: 0; padding: 0; }
body { margin: 0; padding: 0; font-size: small; color: #333 }

    


#wrapper {
    width:600px;
    margin:0 auto;
    padding-top:100px;
    }

#navBar { 
    height:380px;
    margin-bottom:1em;
}

#navigation {
    margin:0px;
    padding:0px;
    text-indent:0px;
    /*background-color:#EFEFEF;  sublists background color */
    width:200px;
}
#navigation a.head { /* list header */
    height: 40px;
    cursor:pointer;
    background: url(collapsed.gif) no-repeat scroll 3px 4px; /* list header bg color and img settings */
    color:#999;
    display:block;
    font-weight:bold;
    font-size: 22px;
    margin:0px;
    padding:0px;
    text-indent:20px;
    text-decoration: none;
}
#navigation a.head:hover {
    color:#900;
}
#navigation a.selected {
    background-image: url(expanded.gif);
    color:#900;
}
#navigation a.current {
    color: #F60;;
    font-weight:bold;
}
#navigation ul {
    margin:0px;
    padding:0px;
    text-indent:0px;
}
#navigation li {
    list-style:none outside none; 
    /*display:inline;*/
    padding:5px 0 5px 0;
}
#navigation li li a {
    color:#000000;
    display:block;
    font-size:16px;
    text-indent:20px;
    text-decoration: none;
}
#navigation li li a:hover { /* sublist hover state bg and color */
    color:#F60;;
    font-weight:bold;
}

这是手风琴插件代码：

    /*
 * jQuery UI Accordion 1.6
 * 
 * Copyright (c) 2007 Jörn Zaefferer
 *
 * http://docs.jquery.com/UI/Accordion
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Revision: $Id: jquery.accordion.js 4876 2008-03-08 11:49:04Z joern.zaefferer $
 *
 */

;(function($) {
    
// If the UI scope is not available, add it
$.ui = $.ui || {};

$.fn.extend({
    accordion: function(options, data) {
        var args = Array.prototype.slice.call(arguments, 1);

        return this.each(function() {
            if (typeof options == "string") {
                var accordion = $.data(this, "ui-accordion");
                accordion[options].apply(accordion, args);
            // INIT with optional options
            } else if (!$(this).is(".ui-accordion"))
                $.data(this, "ui-accordion", new $.ui.accordion(this, options));
        });
    },
    // deprecated, use accordion("activate", index) instead
    activate: function(index) {
        return this.accordion("activate", index);
    }
});

$.ui.accordion = function(container, options) {
    
    // setup configuration
    this.options = options = $.extend({}, $.ui.accordion.defaults, options);
    this.element = container;
    
    $(container).addClass("ui-accordion");
    
    if ( options.navigation ) {
        var current = $(container).find("a").filter(options.navigationFilter);
        if ( current.length ) {
            if ( current.filter(options.header).length ) {
                options.active = current;
            } else {
                options.active = current.parent().parent().prev();
                current.addClass("current");
            }
        }
    }
    
    // calculate active if not specified, using the first header
    options.headers = $(container).find(options.header);
    options.active = findActive(options.headers, options.active);

    if ( options.fillSpace ) {
        var maxHeight = $(container).parent().height();
        options.headers.each(function() {
            maxHeight -= $(this).outerHeight();
        });
        var maxPadding = 0;
        options.headers.next().each(function() {
            maxPadding = Math.max(maxPadding, $(this).innerHeight() - $(this).height());
        }).height(maxHeight - maxPadding);
    } else if ( options.autoheight ) {
        var maxHeight = 0;
        options.headers.next().each(function() {
            maxHeight = Math.max(maxHeight, $(this).outerHeight());
        }).height(maxHeight);
    }

    options.headers
        .not(options.active || "")
        .next()
        .hide();
    options.active.parent().andSelf().addClass(options.selectedClass);
    
    if (options.event)
        $(container).bind((options.event) + ".ui-accordion", clickHandler);
};

$.ui.accordion.prototype = {
    activate: function(index) {
        // call clickHandler with custom event
        clickHandler.call(this.element, {
            target: findActive( this.options.headers, index )[0]
        });
    },
    
    enable: function() {
        this.options.disabled = false;
    },
    disable: function() {
        this.options.disabled = true;
    },
    destroy: function() {
        this.options.headers.next().css("display", "");
        if ( this.options.fillSpace || this.options.autoheight ) {
            this.options.headers.next().css("height", "");
        }
        $.removeData(this.element, "ui-accordion");
        $(this.element).removeClass("ui-accordion").unbind(".ui-accordion");
    }
}

function scopeCallback(callback, scope) {
    return function() {
        return callback.apply(scope, arguments);
    };
}

function completed(cancel) {
    // if removed while animated data can be empty
    if (!$.data(this, "ui-accordion"))
        return;
    var instance = $.data(this, "ui-accordion");
    var options = instance.options;
    options.running = cancel ? 0 : --options.running;
    if ( options.running )
        return;
    if ( options.clearStyle ) {
        options.toShow.add(options.toHide).css({
            height: "",
            overflow: ""
        });
    }
    $(this).triggerHandler("change.ui-accordion", [options.data], options.change);
}

function toggle(toShow, toHide, data, clickedActive, down) {
    var options = $.data(this, "ui-accordion").options;
    options.toShow = toShow;
    options.toHide = toHide;
    options.data = data;
    var complete = scopeCallback(completed, this);
    
    // count elements to animate
    options.running = toHide.size() == 0 ? toShow.size() : toHide.size();
    
    if ( options.animated ) {
        if ( !options.alwaysOpen && clickedActive ) {
            $.ui.accordion.animations[options.animated]({
                toShow: jQuery([]),
                toHide: toHide,
                complete: complete,
                down: down,
                autoheight: options.autoheight
            });
        } else {
            $.ui.accordion.animations[options.animated]({
                toShow: toShow,
                toHide: toHide,
                complete: complete,
                down: down,
                autoheight: options.autoheight
            });
        }
    } else {
        if ( !options.alwaysOpen && clickedActive ) {
            toShow.toggle();
        } else {
            toHide.hide();
            toShow.show();
        }
        complete(true);
    }
}

function clickHandler(event) {
    var options = $.data(this, "ui-accordion").options;
    if (options.disabled)
        return false;
    
    // called only when using activate(false) to close all parts programmatically
    if ( !event.target && !options.alwaysOpen ) {
        options.active.parent().andSelf().toggleClass(options.selectedClass);
        var toHide = options.active.next(),
            data = {
                instance: this,
                options: options,
                newHeader: jQuery([]),
                oldHeader: options.active,
                newContent: jQuery([]),
                oldContent: toHide
            },
            toShow = options.active = $([]);
        toggle.call(this, toShow, toHide, data );
        return false;
    }
    // get the click target
    var clicked = $(event.target);
    
    // due to the event delegation model, we have to check if one
    // of the parent elements is our actual header, and find that
    if ( clicked.parents(options.header).length )
        while ( !clicked.is(options.header) )
            clicked = clicked.parent();
    
    var clickedActive = clicked[0] == options.active[0];
    
    // if animations are still active, or the active header is the target, ignore click
    if (options.running || (options.alwaysOpen && clickedActive))
        return false;
    if (!clicked.is(options.header))
        return;

    // switch classes
    options.active.parent().andSelf().toggleClass(options.selectedClass);
    if ( !clickedActive ) {
        clicked.parent().andSelf().addClass(options.selectedClass);
    }

    // find elements to show and hide
    var toShow = clicked.next(),
        toHide = options.active.next(),
        //data = [clicked, options.active, toShow, toHide],
        data = {
            instance: this,
            options: options,
            newHeader: clicked,
            oldHeader: options.active,
            newContent: toShow,
            oldContent: toHide
        },
        down = options.headers.index( options.active[0] ) > options.headers.index( clicked[0] );
    
    options.active = clickedActive ? $([]) : clicked;
    toggle.call(this, toShow, toHide, data, clickedActive, down );

    return false;
};

function findActive(headers, selector) {
    return selector != undefined
        ? typeof selector == "number"
            ? headers.filter(":eq(" + selector + ")")
            : headers.not(headers.not(selector))
        : selector === false
            ? $([])
            : headers.filter(":eq(0)");
}

$.extend($.ui.accordion, {
    defaults: {
        selectedClass: "selected",
        alwaysOpen: true,
        animated: 'slide',
        event: "click",
        header: "a",
        autoheight: true,
        running: 0,
        navigationFilter: function() {
            return this.href.toLowerCase() == location.href.toLowerCase();
        }
    },
    animations: {
        slide: function(options, additions) {
            options = $.extend({
                easing: "swing",
                duration: 300
            }, options, additions);
            if ( !options.toHide.size() ) {
                options.toShow.animate({height: "show"}, options);
                return;
            }
            var hideHeight = options.toHide.height(),
                showHeight = options.toShow.height(),
                difference = showHeight / hideHeight;
            options.toShow.css({ height: 0, overflow: 'hidden' }).show();
            options.toHide.filter(":hidden").each(options.complete).end().filter(":visible").animate({height:"hide"},{
                step: function(now) {
                    var current = (hideHeight - now) * difference;
                    if ($.browser.msie || $.browser.opera) {
                        current = Math.ceil(current);
                    }
                    options.toShow.height( current );
                },
                duration: options.duration,
                easing: options.easing,
                complete: function() {
                    if ( !options.autoheight ) {
                        options.toShow.css("height", "auto");
                    }
                    options.complete();
                }
            });
        },
        bounceslide: function(options) {
            this.slide(options, {
                easing: options.down ? "bounceout" : "swing",
                duration: options.down ? 1000 : 200
            });
        },
        easeslide: function(options) {
            this.slide(options, {
                easing: "easeinout",
                duration: 700
            })
        }
    }
});

})(jQuery);

原文

I'm using the jQuery accordion plugin and I need help with my accordion menu, the menu displays submenu links on mouseover but closes the main links only after hover on another main link. I want the sub links to show when I hover the mouse over but also to hide after moving the mouse out of the main link.
I would appreciate your help. See code below:

Here is the HTML

    <head>
    <title>Accordion Test</title>
    
    <link rel="stylesheet" href="accordionDemo.css" />
    <script type="text/javascript" src="../lib/jquery.js"></script>
    <script type="text/javascript" src="../lib/chili-1.7.pack.js"></script>
    <script type="text/javascript" src="../lib/jquery.easing.js"></script>
    <script type="text/javascript" src="../lib/jquery.dimensions.js"></script>
    <script type="text/javascript" src="../jquery.accordion.js"></script>

    <script type="text/javascript">
    jQuery().ready(function(){
        // simple accordion with mouseover event
        jQuery('#navigation').accordion({
            active: false,
            header: '.head',
            navigation: true,
            event: 'mouseover',
            fillSpace: true,
            animated: 'easeslide'
        });
    });
    </script>
</head>
<body>
<div id="wrapper">
    


<div id="navBar">
            <ul id="navigation">
                <li>
                    <a class="head" href="?p=1">About SfT</a>
                    <ul>
                        <li><a href="?p=1.1">sub1</a></li>
                        <li><a href="?p=1.2">sub2</a></li>
                        <li><a href="?p=1.3">sub3</a></li>
                        <li><a href="?p=1.4.1">sub4</a></li>
                        <li><a href="?p=1.4.2">sub4.1</a></li>
                        <li><a href="?p=1.4.3">sub4.2</a></li>
                        <li><a href="?p=1.4.4">sub4.3</a></li>
                        <li><a href="?p=1.5">sub5</a></li>
                    </ul> 
                </li>
                <li>
                    <a class="head" href="?p=1.2">Your Life</a>
                    <ul>
                        <li><a href="?p=1.2.1">sub1</a></li>
                        <li><a href="?p=1.2.2">sub2</a></li>
                        <li><a href="?p=1.2.3">sub3</a></li>
                        <li><a href="?p=1.2.4">sub4</a></li>
                        <li><a href="?p=1.2.5">sub5</a></li>
                    </ul> 
                </li>
                <li>
                    <a class="head" href="?p=1.3">Your Health</a>
                    <ul>
                        <li><a href="?p=accordionTest2.html">sub1</a></li>
                        <li><a href="?p=1.3.3">sub2</a></li>
                        <li><a href="?p=1.3.4">sub3</a></li>
                        <li><a href="?p=1.3.5">sub4</a></li>
                        <li><a href="?p=1.3.6">sub5</a></li>
                    </ul> 
                </li>
                                <li>
                    <a class="head" href="?p=1.3">Your Call</a>
                    <ul>
                        <li><a href="?p=1.4.1">sub1</a></li>
                        <li><a href="?p=1.4.2">sub2</a></li>
                        <li><a href="?p=1.4.3">sub3</a></li>
                        <li><a href="?p=1.4.4">sub4</a></li>
                        <li><a href="?p=1.4.5">sub5</a></li>
                    </ul> 
                </li>

            </ul>
        </div>
    </div> <!--end wrapper-->   
    </body>
</html>

This is the CSS:

    * { margin: 0; padding: 0; }
body { margin: 0; padding: 0; font-size: small; color: #333 }

    


#wrapper {
    width:600px;
    margin:0 auto;
    padding-top:100px;
    }

#navBar { 
    height:380px;
    margin-bottom:1em;
}

#navigation {
    margin:0px;
    padding:0px;
    text-indent:0px;
    /*background-color:#EFEFEF;  sublists background color */
    width:200px;
}
#navigation a.head { /* list header */
    height: 40px;
    cursor:pointer;
    background: url(collapsed.gif) no-repeat scroll 3px 4px; /* list header bg color and img settings */
    color:#999;
    display:block;
    font-weight:bold;
    font-size: 22px;
    margin:0px;
    padding:0px;
    text-indent:20px;
    text-decoration: none;
}
#navigation a.head:hover {
    color:#900;
}
#navigation a.selected {
    background-image: url(expanded.gif);
    color:#900;
}
#navigation a.current {
    color: #F60;;
    font-weight:bold;
}
#navigation ul {
    margin:0px;
    padding:0px;
    text-indent:0px;
}
#navigation li {
    list-style:none outside none; 
    /*display:inline;*/
    padding:5px 0 5px 0;
}
#navigation li li a {
    color:#000000;
    display:block;
    font-size:16px;
    text-indent:20px;
    text-decoration: none;
}
#navigation li li a:hover { /* sublist hover state bg and color */
    color:#F60;;
    font-weight:bold;
}

And this is the accordion plugin code:

    /*
 * jQuery UI Accordion 1.6
 * 
 * Copyright (c) 2007 Jörn Zaefferer
 *
 * http://docs.jquery.com/UI/Accordion
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Revision: $Id: jquery.accordion.js 4876 2008-03-08 11:49:04Z joern.zaefferer $
 *
 */

;(function($) {
    
// If the UI scope is not available, add it
$.ui = $.ui || {};

$.fn.extend({
    accordion: function(options, data) {
        var args = Array.prototype.slice.call(arguments, 1);

        return this.each(function() {
            if (typeof options == "string") {
                var accordion = $.data(this, "ui-accordion");
                accordion[options].apply(accordion, args);
            // INIT with optional options
            } else if (!$(this).is(".ui-accordion"))
                $.data(this, "ui-accordion", new $.ui.accordion(this, options));
        });
    },
    // deprecated, use accordion("activate", index) instead
    activate: function(index) {
        return this.accordion("activate", index);
    }
});

$.ui.accordion = function(container, options) {
    
    // setup configuration
    this.options = options = $.extend({}, $.ui.accordion.defaults, options);
    this.element = container;
    
    $(container).addClass("ui-accordion");
    
    if ( options.navigation ) {
        var current = $(container).find("a").filter(options.navigationFilter);
        if ( current.length ) {
            if ( current.filter(options.header).length ) {
                options.active = current;
            } else {
                options.active = current.parent().parent().prev();
                current.addClass("current");
            }
        }
    }
    
    // calculate active if not specified, using the first header
    options.headers = $(container).find(options.header);
    options.active = findActive(options.headers, options.active);

    if ( options.fillSpace ) {
        var maxHeight = $(container).parent().height();
        options.headers.each(function() {
            maxHeight -= $(this).outerHeight();
        });
        var maxPadding = 0;
        options.headers.next().each(function() {
            maxPadding = Math.max(maxPadding, $(this).innerHeight() - $(this).height());
        }).height(maxHeight - maxPadding);
    } else if ( options.autoheight ) {
        var maxHeight = 0;
        options.headers.next().each(function() {
            maxHeight = Math.max(maxHeight, $(this).outerHeight());
        }).height(maxHeight);
    }

    options.headers
        .not(options.active || "")
        .next()
        .hide();
    options.active.parent().andSelf().addClass(options.selectedClass);
    
    if (options.event)
        $(container).bind((options.event) + ".ui-accordion", clickHandler);
};

$.ui.accordion.prototype = {
    activate: function(index) {
        // call clickHandler with custom event
        clickHandler.call(this.element, {
            target: findActive( this.options.headers, index )[0]
        });
    },
    
    enable: function() {
        this.options.disabled = false;
    },
    disable: function() {
        this.options.disabled = true;
    },
    destroy: function() {
        this.options.headers.next().css("display", "");
        if ( this.options.fillSpace || this.options.autoheight ) {
            this.options.headers.next().css("height", "");
        }
        $.removeData(this.element, "ui-accordion");
        $(this.element).removeClass("ui-accordion").unbind(".ui-accordion");
    }
}

function scopeCallback(callback, scope) {
    return function() {
        return callback.apply(scope, arguments);
    };
}

function completed(cancel) {
    // if removed while animated data can be empty
    if (!$.data(this, "ui-accordion"))
        return;
    var instance = $.data(this, "ui-accordion");
    var options = instance.options;
    options.running = cancel ? 0 : --options.running;
    if ( options.running )
        return;
    if ( options.clearStyle ) {
        options.toShow.add(options.toHide).css({
            height: "",
            overflow: ""
        });
    }
    $(this).triggerHandler("change.ui-accordion", [options.data], options.change);
}

function toggle(toShow, toHide, data, clickedActive, down) {
    var options = $.data(this, "ui-accordion").options;
    options.toShow = toShow;
    options.toHide = toHide;
    options.data = data;
    var complete = scopeCallback(completed, this);
    
    // count elements to animate
    options.running = toHide.size() == 0 ? toShow.size() : toHide.size();
    
    if ( options.animated ) {
        if ( !options.alwaysOpen && clickedActive ) {
            $.ui.accordion.animations[options.animated]({
                toShow: jQuery([]),
                toHide: toHide,
                complete: complete,
                down: down,
                autoheight: options.autoheight
            });
        } else {
            $.ui.accordion.animations[options.animated]({
                toShow: toShow,
                toHide: toHide,
                complete: complete,
                down: down,
                autoheight: options.autoheight
            });
        }
    } else {
        if ( !options.alwaysOpen && clickedActive ) {
            toShow.toggle();
        } else {
            toHide.hide();
            toShow.show();
        }
        complete(true);
    }
}

function clickHandler(event) {
    var options = $.data(this, "ui-accordion").options;
    if (options.disabled)
        return false;
    
    // called only when using activate(false) to close all parts programmatically
    if ( !event.target && !options.alwaysOpen ) {
        options.active.parent().andSelf().toggleClass(options.selectedClass);
        var toHide = options.active.next(),
            data = {
                instance: this,
                options: options,
                newHeader: jQuery([]),
                oldHeader: options.active,
                newContent: jQuery([]),
                oldContent: toHide
            },
            toShow = options.active = $([]);
        toggle.call(this, toShow, toHide, data );
        return false;
    }
    // get the click target
    var clicked = $(event.target);
    
    // due to the event delegation model, we have to check if one
    // of the parent elements is our actual header, and find that
    if ( clicked.parents(options.header).length )
        while ( !clicked.is(options.header) )
            clicked = clicked.parent();
    
    var clickedActive = clicked[0] == options.active[0];
    
    // if animations are still active, or the active header is the target, ignore click
    if (options.running || (options.alwaysOpen && clickedActive))
        return false;
    if (!clicked.is(options.header))
        return;

    // switch classes
    options.active.parent().andSelf().toggleClass(options.selectedClass);
    if ( !clickedActive ) {
        clicked.parent().andSelf().addClass(options.selectedClass);
    }

    // find elements to show and hide
    var toShow = clicked.next(),
        toHide = options.active.next(),
        //data = [clicked, options.active, toShow, toHide],
        data = {
            instance: this,
            options: options,
            newHeader: clicked,
            oldHeader: options.active,
            newContent: toShow,
            oldContent: toHide
        },
        down = options.headers.index( options.active[0] ) > options.headers.index( clicked[0] );
    
    options.active = clickedActive ? $([]) : clicked;
    toggle.call(this, toShow, toHide, data, clickedActive, down );

    return false;
};

function findActive(headers, selector) {
    return selector != undefined
        ? typeof selector == "number"
            ? headers.filter(":eq(" + selector + ")")
            : headers.not(headers.not(selector))
        : selector === false
            ? $([])
            : headers.filter(":eq(0)");
}

$.extend($.ui.accordion, {
    defaults: {
        selectedClass: "selected",
        alwaysOpen: true,
        animated: 'slide',
        event: "click",
        header: "a",
        autoheight: true,
        running: 0,
        navigationFilter: function() {
            return this.href.toLowerCase() == location.href.toLowerCase();
        }
    },
    animations: {
        slide: function(options, additions) {
            options = $.extend({
                easing: "swing",
                duration: 300
            }, options, additions);
            if ( !options.toHide.size() ) {
                options.toShow.animate({height: "show"}, options);
                return;
            }
            var hideHeight = options.toHide.height(),
                showHeight = options.toShow.height(),
                difference = showHeight / hideHeight;
            options.toShow.css({ height: 0, overflow: 'hidden' }).show();
            options.toHide.filter(":hidden").each(options.complete).end().filter(":visible").animate({height:"hide"},{
                step: function(now) {
                    var current = (hideHeight - now) * difference;
                    if ($.browser.msie || $.browser.opera) {
                        current = Math.ceil(current);
                    }
                    options.toShow.height( current );
                },
                duration: options.duration,
                easing: options.easing,
                complete: function() {
                    if ( !options.autoheight ) {
                        options.toShow.css("height", "auto");
                    }
                    options.complete();
                }
            });
        },
        bounceslide: function(options) {
            this.slide(options, {
                easing: options.down ? "bounceout" : "swing",
                duration: options.down ? 1000 : 200
            });
        },
        easeslide: function(options) {
            this.slide(options, {
                easing: "easeinout",
                duration: 700
            })
        }
    }
});

})(jQuery);

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

远山浅 2024-12-12 16:52:35

试试这个：

jQuery('#navigation > li').mouseout(function(){
  jQuery('#navigation').accordion("activate",false);
});

另外，为了将来的兼容性，您应该更改

jQuery().ready(...

为

jQuery(document).ready(...

try this:

jQuery('#navigation > li').mouseout(function(){
  jQuery('#navigation').accordion("activate",false);
});

also, for future compatibility, you should change

jQuery().ready(...

jQuery(document).ready(...

回复收藏 0 原文

梦巷 2024-12-12 16:52:35

我想这就是您正在寻找的。看看这个小提琴

// simple accordion with mouseover event
jQuery('#navigation').accordion({
    active: false,
    header: '.head',
    navigation: true,
    event: 'mouseover',
    fillSpace: true,
    animated: 'easeslide',
    collapsible: true
});

$('#navigation').mouseleave(function(){
  $( "#navigation" ).accordion({ active: false});  
});

I think this is what you are looking for. Check out this fiddle

// simple accordion with mouseover event
jQuery('#navigation').accordion({
    active: false,
    header: '.head',
    navigation: true,
    event: 'mouseover',
    fillSpace: true,
    animated: 'easeslide',
    collapsible: true
});

$('#navigation').mouseleave(function(){
  $( "#navigation" ).accordion({ active: false});  
});

回复收藏 0 原文

~没有更多了~