1

構築しているアプリケーションに次のメニューがあり、メニューのサブカテゴリを非表示にするためにいくつかのjqueryルールを適用するのに苦労しています。

私がやりたいことは次のとおりです。

最初にページをロードするときに、各カテゴリの子（child1、child2など）を上にスライド（閉じる）させたいです。コードを介して、選択したアイテムを追跡するため、別のページをロードする場合、メニューは次のルールに従って作成する必要があります。

たとえば、Category1に「選択された」クラスを適用する場合、その子を下にスライドさせます。「選択された」クラスが子に適用される場合、その親ulも展開されるようにします。

ケース1：選択したクラスをCategory1に適用

<ul>     
<li class="selected has-children first-child">Category1</a>                       
 <ul>
  <li class="first-child">Child1</li>
  <li class=" ">Child2</li>
  <li class=" ">Child3</li>
  <li class=" ">Child4</li>
  <li class=" ">Child5></li>
  <li class=" ">Child6</li>
  <li class="last-child">Child6</li>
 </ul>
</li>
<li class="has-children">Category2</a>
 <ul>
  <li class="first-child">Child1</li>
 </ul>
</li>
<li class="has-children last-child">Category3</a>
 <ul>
  <li class="first-child">Child1</li>
  <li class="last-child">Child2</li>
 </ul>
</li>
</ul>

Case 2: selected class applied to child4 (ul should be expanded)

<ul>     
<li class="selected has-children first-child">Category1</a>                       
 <ul>
  <li class="first-child">Child1</li>
  <li class=" ">Child2</li>
  <li class=" ">Child3</li>
  <li class="selected ">Child4</li>
  <li class=" ">Child5></li>
  <li class=" ">Child6</li>
  <li class="last-child">Child6</li>
 </ul>
</li>
<li class="has-children">Category2</a>
 <ul>
  <li class="first-child">Child1</li>
 </ul>
</li>
<li class="has-children last-child">Category3</a>
 <ul>
  <li class="first-child">Child1</li>
  <li class="last-child">Child2</li>
 </ul>
</li>
</ul>

よろしくお願いします

4

1 に答える 1

1

これらのメニューを展開/折りたたむこととの双方向性が必要ですか？または、ページの読み込み時にこの機能を1回だけ適用しますか？2番目の場合は、クラス名を定義する必要があります。

li.parent {
   display:none;
}

li.selected {
   display:block;
}

このクラス名をすべての親要素に適用する必要があります。クラス名を持つ親要素はすべてselected、子要素を自動的に表示します。次に、このjQueryを使用します。

$(function() {

   $('li.parent li').each(function() {
      var parent = $(this).parent('ul').parent('li');
      if($(this).hasClass('selected') || parent.hasClass('selected')) {
         parent.show();
      }
   });

});

これは、すべてのli子要素をループし、クラス名があるかどうかをチェックしますselected。含まれている場合は、親liが表示されます。

于 2012-04-09T20:03:26.130 に答える