Question

我有这个HTML

<ul class="accordion" id="accordion">

                <li class="bg4">
                    <div class="heading">fdgfdg</div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <h2>fdgdf</h2>
                        <p>dfgdfg</p>
                        <a href="#">fdgdfg&rarr;</a>
                    </div>
                </li>
                <li class="bg5 bleft">
                    <div class="heading">מגדל מטלון</div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <h2>ffg</h2>
                        <p></p>
                        <a href="#">more &rarr;</a>
                    </div>
                </li>
            </ul>

我有这段代码

 $(function () {
                $('#accordion > li').hover(



                    function () {
                        var $this = $(this);
                        $this.stop().animate({ 'width': '480px' }, 500);
                        $('.heading', $this).stop(true, true).fadeOut();
                        $('.bgDescription', $this).stop(true, true).slideDown(500);
                        $('.description', $this).stop(true, true).fadeIn();
                    },
                    function () {

                            var $this = $(this);
                            $this.stop().animate({ 'width': '122px' }, 500);
                            $('.heading', $this).stop(true, true).fadeIn();
                            $('.description', $this).stop(true, true).fadeOut(500);
                            $('.bgDescription', $this).stop(true, true).slideUp(700);

                    }
                );
                    });

现在当悬停在其中一个<li>上时，宽度正在增长（并且在取消悬停时收缩）

只有当我将鼠标悬停在其他<li>上并且当容器（li）松散焦点时，<ul>取消悬停代码才会执行，以保持相同的大小。排除unhover代码？

Answer 1

按照：

1）您可以做的是，您可以检查该元素的鼠标中心的宽度。

2）然后你需要获得所有$('#accordion > li')并将其宽度设为122像素

3）并将当前悬停的宽度（使用$(this)）增加到480像素。

Answer 2

我假设您只想在满足其他一些外部条件时折叠项目，所以我使用了一个按钮。

假设你一次只想打开一个，我同意Milind Ansatwar的说法，你需要观察鼠标的使用情况。

您只更改不属于此项目的项目：

    $('#accordion > li').mouseenter(function(){
        var $this = $(this);
        var $others = $('#accordion > li').not($this);

        $this.stop().animate({
            'width': '480px'
        }, 500);
        $('.heading', $this).stop(true, true).fadeOut();
        $('.bgDescription', $this).stop(true, true).slideDown(500);
        $('.description', $this).stop(true, true).fadeIn();

        $others.stop().animate({
            'width': '122px'
        }, 500);
        $('.heading', $others).stop(true, true).fadeIn();
        $('.description', $others).stop(true, true).fadeOut(500);
        $('.bgDescription', $others).stop(true, true).slideUp(700);
    });

现在，当您移动物品时，您永远不会触发鼠标或“去除”，因此它们会一直保持打开状态，直到您输入另一个li。

我添加了一个按钮来折叠项目，以防不希望它们一直打开。

Here is a working demonstration.

Ok 15th time is the charm:

我修改了代码，以便不使用占位符，而是改变标题的定位方式。这有效地消除了舞蹈：

    $('#accordion > li').mouseenter(function(){
        var $this = $(this);
        var $others = $('#accordion > li').not($this);

        $this.stop().animate({
            'width': '480px'
        }, 500);
        $('.heading', $this).stop(true, true).css('position','absolute').fadeOut('500');
        $('.description', $this).stop(true, true).fadeIn();

        $others.stop().animate({
            'width': '122px'
        }, 500);
        $('.description', $others).stop(true, true).fadeOut(500,function(){
            $('.heading', $others).stop(true, true).fadeIn();
            $('.heading', $others).css('position','static');
        });              
    });

它也消除了行的跳跃，但不是全部。我的意思是，毕竟你正在折叠这条行，所以它会从鼠标下面跳出来。

Answer 3

将“取消悬停”功能作为用户移动，并在每个悬停时调用它。也只在ul“dehover”上调用它。

只有悬停在他的容器上时才悬停在带有jquery的元素上

3 个答案: