-1

特定の要素にカーソルを合わせると、下の行にサブメニューが表示される単純なインライン メニューを作成しようとしています。残念ながら、ホバー時にサブメニューを表示できません。CSS に display none があり、クエリに display ブロックがあります。

CSS

ul.main_menu  {
    list-style-type: none;
    text-align: center;
}
ul.main_menu li  {
    margin-left: 20px;
    display: inline;
}
ul.main_menu li a  {
    text-decoration: none;
    color: white;
}
.submenu  {
    height: 20px;
    width: 100%;
}
#services_menu  {
    display: none;
    margin-top: 10px;
}
#services_menu ul {
    list-style-type: none;
    text-align: center;
}
#services_menu ul li  {
    margin-left: 20px;
    display: inline;
}
#service_menu ul li a  {
    text-decoration: none;
    color: white;
}

Jクエリ

$("#servicebutton").hover(
  function () {
    $('#services_menu').css("display","block");
  }, 
  function () {
    $('#services_menu').css("display","none");
  });

HTML

<ul class="main_menu">
  <li id="homebutton"> <a href="#">Home </a></li>
  <li id="servicebutton"> <a href="#" >Services </a></li>
  <li id="packagebutton"> <a href="#" >Packages </a></li>
  <li id="spabutton"> <a href="#">The spa </a></li>
  <li id="productbutton"> <a href="#">Product </a></li>
  <li id="mebutton"> <a href="#">About Me </a></li>
  <li id="contactbutton"> <a href="#">Contact </a></li>
              <div class="submenu">
              <div id="services_menu">
              <ul>
                <li>Services1</li>
                <li>Services2</li>
                <li>Services3</li>
                <li>Services4</li>
                <li>Services5</li>
              </ul>
              </div>
              </div>
</ul>
4

2 に答える 2

1

hide()jQueryとshow()関数を使用しないのはなぜですか?

$('#services_menu').hide();
$('#services_menu').show();

これらの機能は、あなたのために世話をdisplay: blockし、必要に応じdisplay: noneて検出することさえできdisplay: inlineます。

編集: 以下のコメントで @undefined が指摘しているように、ドキュメントの準備が整ったハンドラーが欠落している可能性もあります。全体として、コードは次のようになります。

$(document).ready(function () {
    $("#servicebutton").hover(
        function () {
            $('#services_menu').show();
        }, 
        function () {
            $('#services_menu').hide();
        }
    );
});
于 2013-04-01T22:51:00.867 に答える
0

デモ

あなたのコードはうまくいくようです。

readyこのようにスクリプトをラップしてみてください

  $(document).ready(function(){
     $("#servicebutton").hover(
       function () {
        $('#services_menu').css("display","block");
       }, 
       function () {
         $('#services_menu').css("display","none");
       });
   });
于 2013-04-01T22:59:20.700 に答える