2

いつの日か、私はこのような初心者ではなくなりたいと思っていますが、時には乗り越えられないと感じるものもあります!

わかった。ホバーすると表示される非表示のアイテムを含むナビゲーション バーがあります。

ライブサイトはこちら: http://www.rattletree.com

ナビのコードは次のとおりです。

<ul id="navbar">
  <li id="iex"><a href="index.php">About Rattletree</a></li>
  <li id="upcomgshows"><a href="upcomingshows.php">Calendar</a></li>
  <li id="sods"><a href="#">Sights &amp; Sounds</a>
     <ul class="innerlist">
         <li class="innerlist"><img class="arrowAdjust" src="images/curved_arrow.png" alt="" /></li>
         <li class="innerlist"><a href="/playlist.m3u" target="_blank" onclick="javascript:BatmoAudioPop('Rattletree Marimba',this.href,'1'); return false">Listen</a></li>
         <li class="innerlist"><a href="/new_pictures.php">Photos</a></li>
         <li class="innerlist"><a href="/video.php">Video</a></li>
    <li class="innerlist"><a href="/press.php">Press</a></li>
     </ul>
  </li>
  <li id="bookin"><a href="#">Contact</a>
   <ul class="innerlist">
          <li class="innerlist"><img class="arrowAdjust" src="images/curved_arrow.png" alt="" /></li>
          <li class="innerlist"><a href="/booking.php">Booking Info</a></li>
          <li class="innerlist"><a href="/media.php">Media Inquiries</a></li>
   </ul>
  </li>
  <li id="ste"> <a href="/sounds.php">Store</a></li>
  <li id="instrumes"><a href="/instruments.php">The Instruments</a></li>
  <li id="classe"><a href="classes.php">Workshops</a></li>
 </ul>

CSS:

div#navbar2 {
background-color:#546F8B;
border-bottom:1px solid #546F8B;
border-top:1px solid #000000;
display:inline-block;
position:relative;
width:100%;
}
div#navbar2 ul#navbar {
color:#FFFFFF;
font-family:Arial,Helvetica,sans-serif;
font-size:16px;
letter-spacing:1px;
margin:10px 0;
padding:0;
white-space:nowrap;
}

div#navbar2 ul#navbar li ul.innerlist {
color:#000000;
display:none;
position:relative;
z-index:20;
}

div#navbar2 ul#navbar li {
display:inline;
list-style-type:none;
margin:0;
padding:0;
position:relative;
}

ここで、私がやりたいことは少しトリッキーです: ユーザーがインナーリスト ページの 1 つに移動した場合、そのインナーリスト ul が表示されたままになるようにします (特定の li がホバー状態を表示します)。

今、私は自分でそれを理解できると思いますが、ライブページで、ユーザーがインナーリストのページにいて、そのリストが表示されている場合、ユーザーが他のナビゲーションタブにカーソルを合わせると、それらのインナーリストが表示されることがわかります重複します。これは問題です。

うまくいけば、最後の文は理にかなっています!

要するに、アクティブなページの内部リストを表示し続ける必要がありますが、ユーザーが別のナビゲーション ボタンにカーソルを合わせて独自の内部リストを表示すると、ライブの内部リストを非表示にする必要があります。

泥のように透明？

4

4 に答える 4

0

以下を提案します。表示しているページで、li に のクラスを指定しactiveます。

次に、jQuery を使用して、次の操作を行います。

$('li.active > ul').show();

また、そのliのホバリングの可能性をキャンセルしたいでしょう。そうしないと、誰かがホバリングするたびに、ユーザーがホバリングした後にサブメニューが非表示になります。

そう、

$('li.active').hover(function() {
  $('li.active > ul').show();
});

それはそれを大事にするべきだと私は思います。

幸運を。

于 2010-09-05T23:04:52.790 に答える
0

CSS のみで行うこともできます。参照: http://aext.net/2009/12/incredible-drop-down-menu-solution-with-css-only/

:hover on elements を使用すると、大きなサイトでパフォーマンスの問題が発生する可能性があることに注意してください。これは IE の noch アンカーです -.-

IE クライアントの非リンク要素の :hover 疑似セレクターを避けます。非アンカー要素で :hover を使用する場合は、IE7 および IE8 でページをテストして、ページが使用可能であることを確認してください。:hover がパフォーマンスの問題を引き起こしていることがわかった場合は、条件付きで IE クライアント用の JavaScript onmouseover イベント ハンドラーを使用することを検討してください。

-> http://code.google.com/intl/de-DE/speed/page-speed/docs/rendering.html

于 2010-10-10T14:01:51.323 に答える
0

これを処理するには、Javascript を使用する必要があります。これを完全に CSS で行うことはできません。

必要なことは、ul#navbar のいずれかの要素の「マウスオーバー」イベントでトリガーされる Javascript 関数を作成することです。この関数は、表示されている内部リストを非表示にし、そのメニュー要素の適切な内部リストを表示します。

于 2010-05-08T05:41:45.403 に答える
0

jQueryをお勧めします。jQueryは、この種の作業のための完全なツール セットを提供するからです。ただし、基本的には、上記で宣言した css があると仮定します。

$("ul#navbar li ul.innerlist").show()

また

$("ul#navbar li ul.innerlist").hide()

これらにより、可視性の状態を制御できます。これらを親にバインドします。

$("div#navbar2 ul#navbar li").hover(function() {
  $("ul", this).show();
});

$(this) セレクターの子を取得する方法

于 2010-05-08T05:54:01.403 に答える