0

HTMLでナビゲーションタイプのものを作成しようとしていますが、HTML用に次のコードを追加しました

<div id="sign-wrap">    <div  id="click-box" class="welcome">    
    <p class="welcome" id="name">Welcome Mr. X</p>    </div>    <div id="dropdown">
       <ul>
            <li><a href="/">Insight Pro</a></li>
            <li><p>Mobiles</p></li>
            <li><p>Cameras</p></li>
            <li><p>Laptops</p></li>
            <li><p>Settings</p></li>
            <li><p>Logout</p></li>
       </ul>    </div> </div>

JQ：

$("#name, #click-box").hover(function(){
    if ($('#dropdown').is(":visible")) {
       $('#dropdown').slideUp(1000);
    }
    else{
        $('#dropdown').slideDown(1000);
    }
});

Xさんにカーソルを合わせると下にスライドします#dropdownが、マウスを上に#dropdownスライドさせると...助けてください

4

3 に答える 3

0

クリックボックス要素でクリックイベントを使用すると、ユーザーがメニュー項目をクリックしやすくなる場合があります。たとえば、次のスニペットを使用できます

$("#click-box").click(function () { $("#dropdown").slideToggle("slow"); });

これがお役に立てば幸いです。

于 2013-02-16T16:04:07.537 に答える
0

これを使って...

var hovered = false;

$("#name, #click-box").on('hover', function(e){
        $('#dropdown').slideDown(1000);
});

$("#options").on('hover', function(e){
        hovered = true;
});

$("#dropdown").on('mouseleave', function(e){
        hovered = false;
});

$("#sign-wrap").on('mouseleave', function(e){
    if(!hovered){
        $('#dropdown').slideUp(1000);
    }
});

そして、このjSfiddleの例を参照してください。

于 2013-02-16T15:44:58.460 に答える
0

これはhover、2 つの異なる要素にイベントを指定したために発生します。1 つの要素のホバー イベントが呼び出されると、メニューが表示され、そのメニューに移動しようとすると、他の要素のホバーが起動され、メニュー バーが上に移動します (上にスライドします) [に基づいて上下にスライドを行っています。可視性なので、2回目の発火ではdivが表示され、上にスライドします]

使用mouse enterとmouse leaveイベント
マウスでは、slideDown に入り、マウスでは、slideUp を離れます
(2 つの要素にイベントを与える必要がない場合は、1 つの要素にイベントを適用して、ちらつき効果を防ぐことが望ましい[ある場合] ) 

$("#name, #click-box").mouseenter(function(){
       $('#dropdown').slideDown(1000);
});

$("#name, #click-box").mouseleave(function(){
       $('#dropdown').slideUp(1000);
});

マウス エンターイベントとマウス リーブイベントを参照する

これで問題が解決することを願っています

于 2013-02-16T15:35:12.010 に答える