5

ここで提起された質問に似た問題がありますが、ケースは多少異なります。

私が探している機能は、ナショナル ジオグラフィックのウェブサイトとほぼ同じです。ここでは、メイン リンクの 1 つにカーソルを合わせると「スニーク ピーク」が表示され、それを操作している間、または子メニューにカーソルを合わせると表示されたままになりますが、メニュー項目、子リンク、または「スニーク ピーク」にカーソルを合わせないでください。

下のリスト項目にマウスオーバーすると、指定した DIV が必要です (この場合は番号で対応しますが、番号が存在しない場合、または一致しない場合は、div 名を個別に定義できる柔軟性が必要です) [私は Drupal を使用しており、すべてが動的に生成されます]) スライド アウトするか、その下に表示されます (リストはインラインになります)。DIV に表示されるリンクをクリックできるように開いたままにしておく必要がありますが、DIV またはリスト項目からマウスアウトすると、div が消える必要があります。

私のHTMLは次のようになります。

<div id="navigation">
    <ul id="switches">
      <li class="item-1">First item</li>
      <li class="item-2">Second item</li>
      <li class="item-3">Third item</li>
      <li class="item-4">Fourth item</li>
    </ul>
    <div id="block-1" class="block">
        <p>First block</p>
        <p><a href="http://www.google.com">Click here!</a></p>
    </div>
    <div id="block-2" class="block">
        <p>Second block</p>
        <p><a href="http://www.google.com">Click here!</a></p>
    </div>
    <div id="block-3" class="block">
        <p>Third block</p>
        <p><a href="http://www.google.com">Click here!</a></p>
    </div>
    <div id="block-4" class="block">
        <p>Fourth block</p>
        <p><a href="http://www.google.com">Click here!</a></p>
    </div>
</div>

私のCSSは次のようになります。

#switches li {
    display: inline-block;
    height: 50px;
    background-color: #F33;
}
#block-1,
#block-2,
#block-3,
#block-4 {
    position: absolute;
    top: 50px;
    height: 300px;
    width: 500px;
    background-color: #999;
    display: none;
}
#block-1.active,
#block-2.active,
#block-3.active,
#block-4.active {
    display: block;
}

そして、私のjQuery（他のスレッドに対するCarl Meyerの回答に基づいており、ひどく失敗したと確信しています）は次のようになります。

$(document).ready(function() {
    switches = $('#switches > li');
    slides = $('#navigation > div.block');
    switches.each(function(idx) {
        $(this).data('slide', slides.eq(idx));
    }).hover(
    function() {
        switches.removeClass('active');
        slides.removeClass('active');             
        $(this).addClass('active');  
        $(this).data('slide').addClass('active');
    });
});

私はこのコードがどのように機能しているかよく知らず、それを解決しようとしてきましたが、「idx」の使用と、単数形の「スライド」という用語がどのように機能するかを理解しているかどうかはわかりません。

私は jQuery の初心者で、このプロジェクトを任されています。助けていただければ幸いです。他の人にも役立つことを願っています。

4

1 に答える 1

4

基本的に、ポップアップをトリガーする要素内にポップアップをネストしてから、:hover疑似クラスを使用して表示する必要があります。これを IE6 で動作させる必要がある場合は、:hover シミュレーション用のいくつかの回避策スクリプトを添付する必要がありますが、これはネットで簡単に見つけることができます。トランジションが必要な場合は、同じマークアップでマウス イベントを使用します。

例: http://jsfiddle.net/YNSVj/1/

マークアップは次のとおりです。

<ul class="menu">
    <li class="item"><a href="#">Link 1</a><div class="popup">This is popup number one</div></li>
    <li class="item"><a href="#">Link 2</a><div class="popup">This is popup number two. <br/> It has a line break inside.</div></li>
</ul>

そしてここにCSSがあります：

.item{
    float: left;
    background: #ffc;
    height: 2em;
    padding: 5px 15px 0;
    border: 1px solid #000;
}

.popup
    {
        display: none;
        position: absolute;
        left: 0;
        top: 2em;
        width: 100%;
        margin-top: 17px; /* To compensate for parent block's padding */
        color: #fff;
        background: #f00;
    }

.item:hover .popup
{
    display: block;
}

メニュー項目の明示的な高さを設定してから、ポップアップ ブロックの上余白の値をいじる必要があることに注意してください。これにより、ユーザーがフォント サイズを変更しても引き裂かれません。

また、これは最も単純な解決策であり、状況によっては適用できない場合があることに注意してください。

于 2011-02-17T11:24:09.227 に答える