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）できることは、その要素のマウス入力で幅を確認できることです。

$('#accordion > li')2）次に、すべてを取得して幅を122ピクセルにする必要があります

3)現在のホバリングの幅を ( を使用して$(this)) 480 ピクセルに増やします。

于 2013-01-30T15:26:25.350 に答える
1

他の外部条件が満たされた場合にのみアイテムを折りたたむ必要があると想定したため、ボタンを使用しました。

一度に 1 つだけ開きたいと仮定すると、マウスが li のイベントに入るのを監視する必要があるという 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);
    });

アイテムの上を移動しても、マウス アウトや「dehover」をトリガーすることはありません。そのため、別の 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

「unhover」関数を別の関数として移動し、ホバーするたびに呼び出します。また、ul「dehover」でのみ呼び出します。

于 2013-01-30T15:25:16.330 に答える