0

サイトを構築していて、ドロップダウンのあるメニューがあります。デザインの性質上、現在、マウスがメニュー項目の上にあることを検出しています。関連するサブメニューを表示します。

                                <div class="menu-responsibility menu-item">
                                            <a class="menu-click" href="<?php echo ($baseURL);?>responsibility" title="Responsibility" ></a>

                                                            <div class="sub-responsibility">
                                                                <ul class="sub-list">
                                                                    <li><a href="<?php echo $baseURL; ?>responsibility/social" title="Social Responsibility">Social</a></li>
                                                                    <li><a href="<?php echo $baseURL; ?>responsibility/environmental" title="Environmental Responsibility">Environmental</a></li>
                                                                    <li><a href="<?php echo $baseURL; ?>responsibility/philanthropy" title="Philanthropy">Philanthropy</a></li>
                                                                </ul>      
                                                            </div>
                            </div>

これが私が書いたJSです：

        /* NOTE: Visibility was added due to display objects being clickable with 0 opacity. */
$(".menu-click").hover(function () {
$(this).css('visibility', 'visible');
$(this).parent().css('visibility', 'visible');
$(this).parent().fadeTo("fast", 1);
}, function () {
if ($(this).parent().is(':hover')) {
//alert ("hovering");
} else {
    $(this).parent().fadeTo("fast", 0);
}
});

$(".menu-click").parent().mouseleave(function () {
$(this).fadeTo("fast", 0, function() {
    // this function will called after the opacity animation has completed
    $(this).delay(500).css('visibility', 'hidden');
});
});
    /*End Sub-Menu Function */

これは、フェードするときにうまく機能しました。しかし、不透明度が 0 で、要素がまだ表示されている場合、要素をクリックすることができ (単に表示されないだけです)、これは受け入れられませんでした。

バグ: ときどき、完全にランダムに、メニュー (および隣接するサブメニュー) のホバー状態の一部が消えることがあります。それらはもはや存在せず、強調表示できません。これは、メニュー項目の上でマウスをすばやく動かすと、メニュー項目の 1 つにランダムに発生します。「結果」メニュー項目がこれを行っている場合、Firebug は次のように表示します。強調表示できなくなります。

<div class="menu-home menu-item">
<div class="menu-services menu-item" style="visibility: hidden; opacity: 0;">
<div class="menu-results menu-item" style="opacity: 0; visibility: hidden;">
<div class="menu-clients menu-item" style="visibility: hidden; opacity: 0;">
<div class="menu-about menu-item" style="opacity: 0; visibility: hidden;">
<div class="menu-responsibility menu-item" style="opacity: 0; visibility: hidden;">
<div class="menu-contact menu-item">

非常に奇妙なバグです。うまくいけば、皆さんが助けてくれます! 私の開発サイトが利用可能で、おそらく役立つでしょう: http://www.kipdo.com

前もって感謝します！

4

1 に答える 1

0

問題は、おそらく .parent() 関数の使用方法に関連しています。

インライン CSS を変更する代わりに、JQuery の .hide() および .show() 関数を使用することをお勧めします。もう 1 つの提案は、親タグを使用してホバー/非表示/表示を維持し、.

于 2013-02-08T09:04:41.717 に答える