0

私は現在Jqueryを学んでいますが、この基本的なコードで間違いを解決できないようです。目標は、ユーザーが「メニュー項目2」の上にマウスを置いたときにドロップダウンメニューを表示することです。誰かが私の間違いを見るのを手伝ってくれませんか。以下に正しく表示されない場合のコードへのリンクを示します：http：//www.door9.co.uk/nav.html

<style>
     ul          {list-style : none; padding : 0; width: 100%; }
     ul li       {display: inline;}
     li          {display : inline; margin-right : 20px; }
     li ul       {display : none; }
     li:hover ul {display : block; width: 145px; position: relative; left: 160px; }
</style>

<body> 
 <div>
   <ul>
    <li>Main list item one</li>
    <li>Main list item two &darr;
       <ul>
            <li>Sub list item one</li>
            <li>Sub list item two</li>
            <li>Sub list item three</li>
       </ul>
    </li>
    <li>Main list item three</li>
    <li>Main list item four</li>
   </ul><!-- UL close -->
 </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1 jquery.min.js"></script>

<script>
  $(document).ready(function(){
    $('li').has('ul').hover(function(){
        $('li ul').slideToggle(function(){
          $('li ul').slideToggle();
        });
    });
  });
</script>

</body>
4

2 に答える 2

1

1）jQuery hoverメソッドは、mouseenterイベントハンドラーとmouseleaveイベントハンドラーの2つの引数を取ります。（1つしかありません）

2）ハンドラー内のすべてのサブメニューを選択しているようです。ほとんどの場合、ホバーしているアイテム内の1つだけが必要です。

これはおそらくあなたが達成しようとしていることに近いでしょう：

$("li").has("ul").hover(function () {
    $(this).find("ul").slideDown();
}, function () {
    $(this).find("ul").slideUp();
});
于 2013-03-05T11:24:26.590 に答える
1

この線

li:hover ul {display : block; width: 145px; position: relative; left: 160px; }

CSSで干渉している可能性があります。

以下のコードはあなたが探しているものでしょうか？

<html>
<head>  

  <style>
    ul    { list-style: none; padding: 0; width: 100%; }
    ul li { display: inline; }
    li    { display: inline; margin-right: 20px; }
    li ul { display: none; }
  </style>

</head>
<body>

  <ul>
    <li>Main list item one</li>
    <li>Main list item two &darr; 
      <ul>
        <li>Sub list item one</li>
        <li>Sub list item two</li>
        <li>Sub list item three</li>
      </ul>
    <li>Main list item three</li>
    <li>Main list item four</li>
  </ul>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>   

  <script>     
    $('li').has('ul').hover(function() {
      $(this).children('ul').slideToggle();
    }); 
  </script>

</body>
</html>

スタイルを設定したい場合は、スタイルをセレクター（ではなく）にli>ul書き込んでから、ドキュメントが読み込まれるときにjQueryで使用することができます。これは、ビューアでJavaScriptがオフになっている、または使用できない場合にも適しています（この場合、JavaScriptがオフになっているかどうかは表示されないため）。li ulli:hover ulhide()li>ul

また、セレクターliとul li冗長に見えますが、私は逸脱します...

于 2013-03-05T11:32:59.400 に答える