-1

私はこのコードを持っています:

<ul>
 <div class="sub_cat_box"> 

 <li class="current"><a href="#">Cat 1</a></li> 
   <ul> 
     <li><a href="#">Prod1</a></li> 
     <li><a href="#">Prod1</a></li> 
   </ul> 

 </div> 

 <div class="sub_cat_box"> 

 <li class="current"><a href="#">Cat 2</a></li> 
   <ul> 
     <li><a href="#">Prod1</a></li> 
     <li><a href="#">Prod1</a></li> 
   </ul> 

  </div> 
</ul>

<ul>をクリックしたときに各子を表示/非表示にしたい<li class='current'>。jQueryでやってみましたが、うまくいきませんでした。

4

8 に答える 8

5

jQuery を使用して、クラス セレクターで li 要素を選択し、イベント ハンドラーをクリック関数にバインドします。バインドされた関数は、選択された要素に関連する次の ul を見つけ、それに対してtoggleメソッドを呼び出す必要があります。デフォルトでは、jQuery の toggle メソッドは要素の可視性を切り替えます:

$(".current").click(function(){
  $(this).next("ul").toggle();
});

作業例: http://jsfiddle.net/ytXFQ/

于 2012-11-08T10:37:01.303 に答える
5

あなたの HTML は正しくありません。

次の HTML 構造で試してください。

<ul>
 <li class="current">
    <a href="javascript: toggleChildren('cat1');">Cat 1</a>
    <div class="sub_cat_box" id="cat1">
      <ul> 
        <li><a href="#">Prod1</a></li> 
        <li><a href="#">Prod1</a></li> 
      </ul> 
    </div>
  </li> 
</ul>

関数：

function toggleChildren(id) {

   var elem = document.getElementById(id);
   if(!elem) alert("error: not found!");
   else {

      if(elem.style.display == "block")
         elem.style.display = "none";

      else
         elem.style.display = "block";
   }
}

CSS:

.sub_cat_box {display: none;}
于 2012-11-08T10:42:46.857 に答える
1

HTML が無効です (ul 内で使用できるのは il のみです。div およびその他の ul は lis 内に含める必要があります)。次のようになります。

<ul>

    <li class="current"><div class="sub_cat_box"> 
       <a href="#">Cat 1</a>
       <ul> 
         <li><a href="#">Prod1</a></li> 
         <li><a href="#">Prod1</a></li> 
       </ul> 
       </div> 
      </li> 
     <li class="current">     
      <div class="sub_cat_box"> <a href="#">Cat 2</a> 
       <ul> 
         <li><a href="#">Prod1</a></li> 
         <li><a href="#">Prod1</a></li> 
       </ul>         
      </div> 
    </li>
    </ul>

そのようにしたら、次のようなコードを適用できます。

$(".current").click(function(e){
     $(this).find('ul').toggle();
})
于 2012-11-08T10:43:34.740 に答える
0

次のように実行できます。

$('.current').next('ul').hide();​​​ // Make them hide by default
  $('.current').click(function(){
     $(this).next('ul').slideToggle();
  });

ライブデモ

于 2012-11-08T10:39:39.737 に答える
0 
$('li.current').on('click', 'a', function() {
  $(this).parent().find('ul').toggle();
  return false;
});
于 2012-11-08T10:37:11.340 に答える
0

これを使って：

$(document).on("click", "li.current > a", function(){
   $(this).next().slideToggle();
});
于 2012-11-08T10:37:25.810 に答える
0

これを試して：

$("ul > li.current").on('click', 'a', function(){
      $('ul.class').children().toggle();
    });

クラスはあなたのULクラスです。これは最もクリーンな jQuery コードだと思います。

于 2012-11-08T10:42:20.017 に答える
0 
$('li.current a').click(function(){
  $(this).parent().next('ul').slideToggle(); // or
  //$(this).parent().next('ul').toggle();
});
于 2012-11-08T10:45:55.937 に答える