2

私はこれまでjQueryを使用したことがなく、本当に単純なことをしようとしていますが、それは私を夢中にさせています。CMSのテンプレートを設計しましたが、メニューをアニメーション化したいと思います。次の図は、メニューの構造を説明しています（これは明らかにCMSによって生成されます）
メニュー構造

以下のコードは私がうまくいくと思うものですが、そうではありません：

var menuItem = jQuery(".menu:first>li");
var subMenu;
for(var i=0; i<menuItem.length;i++)
{
    var li = jQuery(menuItem[i]);
    subMenu = li.children("ul");
    if (subMenu.length)
        li.hover(function(){ li.children("ul").slideToggle(250); });   
}

基本的に、私が行っているのは、最初のレベルを取得してからリスナーをli追加し、子（実際のサブメニュー）をアニメーション化するように指示することです。 代わりに、「製品」をポイントすると、独自のサブメニューが表示されず、代わりに「お問い合わせ」のサブメニューがポップアップ表示されます。「お問い合わせ」をポイントすると、サブメニューが想定どおりにポップアップ表示されます。注：茶色はdisplay：none に設定されています。助けていただければ幸いです。事前に感謝しますPS：私はjQuery 1.7.1を使用しています（重要な場合）hoverul
ul

4

2 に答える 2

2

あなたが達成しようとしていることは非常に複雑に見えます。私はこのようなことをします。

$(".menu > li").hover(

  //When mouse is over the menu button
  function () {
    $(this).children("ul").slideDown(250);
  },

  //When mouse leaves the menu / menu button 
  function () {
    $(this).children("ul").slideUp(250);
  }
);
于 2012-07-19T14:18:00.667 に答える
1

コードで何をしようとしているのかはわかりますが、最初に適切な jQuery の実践から始めるべきだと思います。それは本当に難しいことではありません。そして、それはあなたの人生をずっと楽にしてくれます。

まず第一に、ここでループが必要かどうかわかりません。jQuery はクラスを選択するためのセレクター (ショートカットとして $ と共に使用できます) を提供しており、非常に強力です。次のようにメニューを作成します (一種):

<ul id="menu">
   <li class="menu-item">Home
      <ul>
        <li></li>
        <li></li>
      </ul>
   </li>
   <li class="menu-item">Products
      <ul>
        <li></li>
        <li></li>
      </ul>
   </li>
   <li class="menu-item">Contact us
      <ul>
        <li></li>
        <li></li>
      </ul>
   </li>
</ul>

次に、メニュー項目を選択できます

$('.menu-item')

ホバー機能で、ドロップダウンを選択します

$(this).childen('ul')

それから基本的に楽しんでください！

于 2012-07-19T14:23:44.867 に答える