-3

ナビゲーションメニューを作りたいのですが..

私はこれにjqueryを使用しています...

   $('.about').on('mouseenter', function(){
        $(this).css({'background':'#144f19'});
        $('.submenu_about').css({'display':'block', 'position':'absolute'});
        $('.items_list').on('mouseout', function(){
            $('.submenu_about').css({'display':'none', 'opacity':'0px'});
            $('.about').css({'background':'none'});
        })
   });

しかし、正しく動作していません。誰でも私を助けることができますか？前もって感謝します。

4

2 に答える 2

1

答えではないかもしれませんが（質問を理解するのに十分な情報を提供していません）、あなたは今持っています

$('.about').on('mouseenter', function(){
    //...
    $('.items_list').on('mouseout', function(){
        //...
    });
});

しかし、そうあるべきです

​$(function(){
    $('.about').on('mouseenter', function(){
        //...
    });

    $('.items_list').on('mouseout', function(){
        //...
    });
});

更新:これが欲しいかもしれません。

于 2012-10-12T20:38:18.723 に答える
1

jQuery をまったく含めずにできることを次に示します。

http://jsfiddle.net/qsENf/1/

「About」セクションの css のみを含めましたが、コードは簡単に変更して任意の項目を処理できます。これがあなたの望むものかどうかはわかりませんが、近いはずです。jQuery を使用する場合は、すべての要素の css を変更する代わりに、css クラスを定義し、jQuery を使用してそれらを追加できます。

CSSは次のとおりです。

.submenu_about {
    display: none;
}

.about {
    background:transparent;
}
.about:hover {
    background:#144f19;
}

.about:hover .submenu_about {
   display: block;
}

そしてhtml：

<div class="navigation_bar">
  <ul class="menu_list">
    <li class="a_menu_item about">
      About Us
      <div class="submenu_about">
        <ul class="items_list" style="list-style:none">
          <li class="a_sub_menu_item"><a href="#">News and Events</a></li>
          <li class="a_sub_menu_item"><a href="">Financial Assistance</a></li>
          <li class="a_sub_menu_item"><a href="">Who We See</a></li>
          <li class="a_sub_menu_item"><a href="">Insurance Information</a></li>
        </ul>
      </div>

    </li>
    <li class="a_menu_item theater">Theater</li>
    <li class="a_menu_item leader">Leadership Team</li>
    <li class="a_menu_item career">Careers</li>
    <li class="a_menu_item contact">Contact Us</li>
  </ul>
</div>

これには jQuery は必要ありません。サブナビがメイン ナビの内側にない場合、jQuery はその可視性を切り替えるのに役立ちます。

于 2012-10-12T20:38:37.643 に答える