0

我有这个 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>）松开焦点时，它会保持相同的大小而不执行取消悬停代码？

4

3 回答 3

2

按照这个：

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

2）然后你需要得到所有$('#accordion > li')并将它们的宽度设置为 122pixels

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

于 2013-01-30T15:26:25.350 回答
1

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

假设您一次只想要一个打开，我同意 Milind Ansatwar 的观点，即您需要观看 li 的鼠标输入事件。

您仅更改不是此项目的项目：

    $('#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。

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

这是一个工作演示。

好吧，第 15 次是魅力：

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

    $('#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');
        });              
    });

它还消除了一些行的跳跃，但不是全部。我的意思是毕竟你正在折叠该行，所以它会从鼠标下方跳出来。

于 2013-01-30T16:05:57.963 回答
0

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

于 2013-01-30T15:25:16.330 回答