Question

我正在使用下面的Javascript为手风琴设置动画（这是一个稍微修改过的变体，如下所示：http://tympanus.net/codrops/2010/04/26/elegant-accordion-with-jquery-and-css3/。

现在我想让第一个元素在pageload上打开，所以我想我只是通过Javascript给它一些额外的类（并通过CSS定义.active状态）让它打开。

这很有效，但是如果我将鼠标悬停在除first-element类.active之外的任何一个上，则第一个元素保持其状态，并保持打开状态，直到我将其悬停在其上至少一次。

所以，我想要的是：如果用户将鼠标悬停在任何不是第一个的元素上，我的手风琴的第一个元素就会打开并折叠。我想我需要在hover函数中添加一行来取出第一个元素的类或者给新元素赋予活动状态，但是我不知道怎么做并继续打破的事情。

<script type="text/javascript">
        jQuery(function() {

            activeItem = jQuery("#accordion li:first");
            jQuery(activeItem).addClass('active');

            jQuery('#accordion > li, #accordion > li.heading').hover(
                function () {
                    var jQuerythis = jQuery(this);
                    jQuerythis.stop().animate({'height':'280px'},500);
                    jQuery('.heading',jQuerythis).stop(true,true).fadeOut();
                    jQuery('.bgDescription',jQuerythis).stop(true,true).slideDown(500);
                    jQuery('.description',jQuerythis).stop(true,true).fadeIn();
                },

                function () {
                    var jQuerythis = jQuery(this);
                    jQuerythis.stop().animate({'height':'40px'},1000);
                    jQuery('.heading',jQuerythis).stop(true,true).fadeIn();
                    jQuery('.description',jQuerythis).stop(true,true).fadeOut(500);
                    jQuery('.bgDescription',jQuerythis).stop(true,true).slideUp(700);
                }
            );
        });
    </script>

Answer 1

看起来这种情况正在发生，因为每个手风琴项目都有自己的悬停事件，可以处理自己的动画。您可以稍微重构代码，以便更容易理解和重用：

        var activeItem = jQuery("#accordion li:first");

        jQuery('#accordion > li, #accordion > li.heading').hover(
            function () { hoverMe(jQuery(this)); },
            function () { unhoverMe(jQuery(this)); }
        );

        //This gets called when cursor hovers over any accordion item
        var hoverMe = function(jQuerythis) {

            //If the first item is still active
            if (activeItem) {
                contract(activeItem); //...Shrink it!
                activeItem = false;
            }

            //Expand the accordion item
            expand(jQuerythis);
        };

        //This gets called when cursor moves out of accordion item
        var unhoverMe = function(jQuerythis) {
                contract(jQuerythis);
        };

        //I have moved the hover animation out into a separate function, so we can call it on page load
        var expand = function(jQuerythis) {
                jQuerythis.stop().animate({'height':'280px'},500);
                jQuery('.heading',jQuerythis).stop(true,true).fadeOut();
                jQuery('.bgDescription',jQuerythis).stop(true,true).slideDown(500);
                jQuery('.description',jQuerythis).stop(true,true).fadeIn();
        };

        //I have moved the unhover animation out into a separate function, so we can contract the first active item from hoverMe()
        var contract = function() {
                jQuerythis.stop().animate({'height':'40px'},1000);
                jQuery('.heading',jQuerythis).stop(true,true).fadeIn();
                jQuery('.description',jQuerythis).stop(true,true).fadeOut(500);
                jQuery('.bgDescription',jQuerythis).stop(true,true).slideUp(700);
        };

        //Now expand the first item
        expand(activeItem);

我把a simplified version放在一起展示了逻辑。请告诉我你是怎么过的。

jQuery手风琴|在pageload＆amp;上打开第一个元素积极的国家混乱

1 个答案: