4

lijQuery を使用して子要素を非表示にする標準のドロップダウン メニューがあります。ただし、サイトを読み込むと、子要素がすぐに表示され、その後消えます (一瞬のように)。これは、スタイル設定されていないコンテンツのフラッシュの既知の問題とはまったく関係がないと思います。

サイトはヘブライ語ですが、何の影響もありません。サイトはこちら

サンプルの HTML + CSS と Javascript コードが必要な場合は、喜んでここに投稿します。

誰かが以前にこの問題に遭遇したことがあるかどうか疑問に思っていました. Chrome で発生していますが、IE や Firefox でも発生するかどうかはまだ確認していません。

ありがとう！

編集: 以下に示す HTML/CSS/JS:

HTML:

<ul class="menu">
  <li><a href="#">blah</a>
    <ul class="sub-menu">
      <li><a href="#">blah</a></li>
    </ul>
  </li>
</ul>

CSS:

/* NAVIGATION -- level 1 */
ul.menu { float: right; list-style-type: none; font-size: 15px; margin-top: 50px; }
ul.menu > li{ float: right; display: inline; position: relative; margin-left: 30px; }
ul.menu li > a { display: block; color: #5c5d5f; text-decoration: none; border-bottom: solid 1px #9b9a95;  }

ul.menu li:hover > a, ul.menu li a:hover , ul.menu li.current_page_item > a { color: black; }
body.home .current_page_item > a { }
body.home .current_page_item > a:hover { }

/* NAVIGATION -- level 2 */
ul.menu li > div { display: none; width: 157px; height: 171px; margin-right: -10px; position: absolute; opacity:0; background: url(images/subNav_bg.png) no-repeat top right; }

ul.menu li > div span { height: 15px; background: transparent; display: block; } /* used to push down the menu */

JS:

// navigation menu //
// add hasSubMenu to each li that has one //
$('.menu > li').has('ul').addClass('hasSubMenu');

// wrap with <div> //
$('li.hasSubMenu > ul').wrap('<div />');
$('ul.menu li > div').css('display', 'none');
$('ul.menu li > div').prepend('<span></span>');
$('li.hasSubMenu > a').click(function () {
    return false;
});

// add class to <div> for extendedBg //
$('li.extendedBg').find('div').addClass('subBg2');

$('li.hasSubMenu').hover(function () {
    // hover on
    $(this).addClass('hover').find('div').stop().fadeTo("medium", 1, /* when done fading */
        function () {
            $(this).find('div').css('display', 'block');
            //$(this).find('ul').css('display','block');
        }
    );

}, function () {
    // hover off
    $(this).removeClass('hover').find('div').stop().fadeOut();
});
4

4 に答える 4

8

display: noneページの CSS のようにドロップダウン メニューを設定するか、 を使用して要素自体に直接設定しますstyle="display:none"。これにより、ページの読み込み時に非表示になります。

于 2012-04-19T21:29:33.180 に答える
3

私は同じ問題を抱えています:(ロード時にcssを使用して非表示にした場合を除いて、親にカーソルを合わせても表示されないという問題があります...

返信を投稿する前から、もう1つ試してみようと思いました

#navigation ul ul{
    display:none;
}

それ以外の

#navigation ul ul li{
    display:none;
}

そして今それは完全に動作します

于 2013-01-04T11:37:27.057 に答える
2

スタイル シートの li 要素を display:none に設定することをお勧めします。これにより、ブラウザは最初にそれらを非表示としてレンダリングすることを認識できます。次に、jQuery が読み込まれると、jQuery が追加するインライン スタイルが表示スタイルをオーバーライドします。

ul li {
  display:none;
}
于 2012-04-19T21:30:00.910 に答える
0

Try:

.mobile-menu:not( .mm-menu ) {
     display: none;
}

where '.mobile-menu' is whatever class or ID you have given to the containing element of your menu.

e.g 

<div class="mobile-menu">
   <ul>
       <li><a href="/about">about</a></li>
       <li><a href="/food">Food</a></li>
   </ul>
</div>
于 2016-03-02T00:57:51.963 に答える