0

私はこのリストを持っています：

<ol id="followUs">
    <li>Follow us</li>
    <li class="blog"><a href="#"></a></li>
    <li class="linkedIn"><a href="#"></a></li>
    <li class="twitter"><a href="#"></a></li>
    <li class="facebook"><a href="#"></a></li>
    <li class="smartPhone"><a href="#"></a></li>
    <li id="shareMore">More
        <ul id="socialMore" style="display: none;">
            <li id="youtube"><a href="#">Youtube</a></li>
            <li id="flickr"><a href="#">FlickR</a></li>
            <li id="slideshare"><a href="#">SlideShare</a></li>
            <li id="newsletter"><a href="#">Newsletter</a></li>
        </ul>
    </li>
</ol>

そして次のjQuery：

<script>
jQuery(document).ready(function(){
    jQuery("li#shareMore").mouseenter(function() {
        jQuery('ul#socialMore').css("display","block");
        jQuery('span.popin_header_button').css("display","none");
    });

    jQuery("li#shareMore").mouseleave(function() {
        setTimeout( function(){
            jQuery('ul#socialMore').css("display","none");  
            jQuery('span.popin_header_button').css("display","block");
        },1000);
    });
})
</script>

2番目のリスト#socialMoreはページの読み込み時に非表示になり、マウスオーバーで表示したいと思います。これは、＃socialMoreのリストにカーソルを合わせてもそこにとどまります。問題は、＃socialMoreリストにカーソルを合わせているときにリストが表示されたり消えたりすることです（2番目のリストが最初のリストと重ならない限り）。

第二に、私は周りのスタッフをリストの下に配置したいのですが、それは起こっていないので、それらを隠す必要があります。

CSSの場合、最初のリスト#followUsは水平で、2番目のリスト#shareMoreは垂直です。

誰でもここで解決策を提案できます。何が悪いのかわからない。

通りかかってくれてありがとう。

10月15日に編集

jQueryを次のように変更しました。

jQuery("li#shareMore").hover(function() {
    jQuery('li#shareMore>ul').show();
},function(){
        setTimeout( function(){
            jQuery('li#shareMore>ul').hide();   
        },2000);
    }
);

動作しますが、不安定です。時々、それは完全に機能します、そして時々、私がまだ最初にホバリングしているときでさえ、ulはちょうど消えます<li id="shareMore">More

編集II：10月15日

さらに推し進めると、それほど不安定ではないことがわかりました。ロジックは、ページの更新時に、リストにli#shareMore移動せずにホバーすると、期待どおりに機能します。>ul初めて>ulリストにカーソルを合わせると、期待どおりに機能します。ただし、>ulリストからカーソルを合わせると、次の時間から>ul、setTimeOut時間（この場合は2秒）内にリストが消えます。

ただし、setTimeOut limitを0に設定すると、すべてが期待どおりに機能します。私が何かを逃していない限り、これはこれまでの観察です。奇妙な世界 ！

ヒントをありがとう>奇妙な状況。

編集

cleartimeoutを使用して最終的に解決されたようです：jqueryホバーとsetTimeout / clearTimeOut

4

3 に答える 3

0

あなたが試すことができます：

jQuery(document).ready(function(){
    jQuery("li#shareMore").mouseenter(function() {
       $('ul#socialMore').show();
    });

    jQuery("li#shareMore").mouseleave(function() {
       $('ul#socialMore').hide();
    });
})

参照: jsfiddle

于 2012-10-12T10:00:49.933 に答える
0

以下のコードで試すことができますか

jQuery("li#shareMore").on("mouseout", 'ul#socialMore li', function() {
    setTimeout( function(){
        jQuery('ul#socialMore').css("display","none");  
        jQuery('span.popin_header_button').css("display","block");
    },1000);
});

jqueryのonイベントを使い始める。

于 2012-10-12T10:07:05.370 に答える