1

这是我的网站：

http://www.raceramps.com/v2

将鼠标移到右侧的菜单上。注意 Car Service、Trailer Haling 和 Show & Display 在默认情况下是如何完全放大的。这是因为它们是销量较高的产品，大多数浏览该网站的人都在寻找这些产品。

目前有一个使用以下代码的手风琴菜单设置：

$(function(){
    $( '.buttonEffectWrapper' ).hover (
        function () {

            var effect = $(this).siblings().filter(":last");
            effect.stop ().animate ( { opacity: 1}, { duration: 300 } );

            $(this).stop().parent().animate({height: "110px"}, {duration: 300 } );//accordion effect here


        },
        function () {
                    var effect = $(this).siblings().filter(":last");
                  effect.stop ().animate ( { opacity: 0}, { duration: 300 } );

                  $(this).stop().parent().animate({height: "30px"}, {duration: 300 } );//accordion effect here

        }
    );
} );

首先，如果您将鼠标水平移动到其中一个按钮上几次，它会建立一个队列。我认为使用 stop() 应该可以解决此问题，但似乎并非如此。

其次，我不希望前三个 div（#car-service、#trailer-hauling 和 #display-and-show）在鼠标离开时折叠。我尝试了以下操作，但它选择了其他所有内容。

  $(this + ":not(#car-service, #trailer-hauling, #display-and-show)").stop().parent().animate({height: "30px"}, {duration: 300 } );

第三，如果您将鼠标悬停在一个 div 上，然后移动到其下方的一个，当一个 div 展开而另一个 div 折叠时，您的鼠标最终会处于您不想要的位置。我能想到的解决此问题的唯一方法是不允许前一个 div 折叠。

因此，如果我将鼠标悬停在#car-service，然后转到#trailer-hauling，则#car-service不应崩溃。但如果我从#trailer-hauling到#show-and-display，那么我想#car-service签约。这应该可以防止接口被破坏。

4

2 回答 2

0 
if(!$(this).is("#car-service, #trailer-hauling, #display-and-show")){
   $(this).parent().animate({height: "30px"}, {duration: 300, queue:false});
}

$(this)指 DOM 中的单个元素（或一组元素）。我认为最好测试它是否/具有特定属性或过滤它，而不是使用$(this)选择器。

于 2010-01-04T20:13:51.523 回答
0

首先 在animate()第二个选项参数中，您可以指定队列：

effect.animate({
    opacity: 1
},{
    duration: 300,
    queue: false
});

第二 试试这个：

$(this).filter(function() {
    return !this.id.match(/^(car-service||trailer-hauling||display-and-show)$/);
}).someMethod()...
于 2010-01-04T20:19:03.260 回答