0

次のような単純な jQuery ドロップダウンがあります: http://jsfiddle.net/7ZVb7/1213/

私が達成したいのは、「その他」ボタンをホバーするとドロップダウンメニューがスライドダウンし、カーソルが「その他」またはドロップダウンから離れるとスライドアップすることです。

ただし、ドロップダウンのいずれかがクリックされたときにドロップダウンメニュー全体がスライドアップするように別のイベントを追加すると、機能しません。何らかの理由で、「ホバー」効果もトリガーされ、ドロップダウンメニューが点滅し続けます。

html:

<div id="table">
<div class="container">
                        <a href="#" class="smallRedButton manage">More</a>
                        <div class="hidden list">
                            <ul>
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                            </ul>
                        </div>
                    </div>
</div>

jQuery:

$(function() {
    $('#table').on('hover', '.container', function(event) {
        console.log('hover');
        $(this).find('div').slideToggle(100);
            event.preventDefault();
    });

    $('#table').on('click', '.container li', function(event) {
         $(this).parents(".list").slideUp('slow').show();

    });
})();
4

2 に答える 2

1

多分それはあなたが望むものです: DEMO

$(function() {
    $('#table').on('mouseover', '.manage', function() {
        $(this).siblings('div').slideDown('slow');
    }).on('mouseleave', '.container', function(event) {
        $(this).find('div').slideUp('slow');
    });

    $('#table').on('click', '.container li', function() {
        $(this).parents(".list").slideUp('slow').show();
    });
});
于 2013-08-09T21:38:32.077 に答える
0

あなたは実際に純粋なcssソリューションを行うことができます:

フィドル: http://jsfiddle.net/nGqsQ/1/

HTML

<div class="dropdown-container">
   <a href="#" class="handle">More</a>
   <div class="dropdown">
       <ul>
           <li>1</li>
           <li>2</li>
           <li>3</li>
       </ul>
   </div>
</div>

CSS

.dropdown-container {
    width: 150px;
}

.dropdown-container .dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s;
}

.dropdown-container .dropdown:hover,
.dropdown-container .handle:hover + .dropdown {
    max-height: 200px;
}

.dropdown-container .dropdown ul {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
}

.dropdown-container .dropdown ul li {
    padding: 5px 10px;
    color: #0061a7;
}

.dropdown-container .dropdown ul li:hover {
    background-color: #0061a7;
    color: #ffffff;
}

編集：これdropdown-containerはオプションですが、グループ化するためにラップするのが好きです

EDIT2：説明するのを忘れていました...主要部分は次のとおりです。

.dropdown-container .dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s;
}

.dropdown-container .dropdown:hover,
.dropdown-container .handle:hover + .dropdown {
    max-height: 200px;
}

ここで.dropdownは、デフォルトで に設定さmax-height: 0れているため、画面には表示されません。

次に、 にカーソルを合わせると.handle、ルール.handle:hover + .dropdownが一致して が設定されmax-height: 200pxます。実際の高さよりも大きい限り、それを任意の値に変更できます (見栄えの良いアニメーションには、正確な値が推奨されます)。また、ホバーするように変更すると.dropdown、ルール.dropdown-container .dropdown:hoverが有効になります。

出来上がり。

于 2013-08-09T21:13:11.137 に答える