jQでリストを出現させる方法が知りたいです。

Question

<div class="header-category">
          <a href="#">
            <h1>カテゴリー</h1>
            <h2>Category</h2>
          </a>
          <div class="category">
            <ul class="category-1">
              <li><a href="#">カテゴリー01</a></li>
              <li class="category-02"><a href="#">カテゴリー02</a></li>
              <li><a href="#">投稿サンプル</a></li>
              <li><a href="#">トピックス</a></li>
            </ul>
            <ul class="category-2">
              <li><a href="#">カテゴリー02_a</a></li>
              <li><a href="#">カテゴリー02_b</a></li>
              <li><a href="#">カテゴリー02_c</a></li>
            </ul>
          </div>
        </div>

  $('.header-category').hover(function(){
    $('.category-1').stop().slideDown();
  },function(){
      $('.category-1').stop().slideUp();
  });
  $('.category-02').hover(function(){
    $('.category-2').stop().slideDown();
  },function(){
    $('.category-2').stop().slideUp();
  });

要素をhoverしたときにリストをスライドさせ、さらにその中のリストの要素をhoverしたときに
別のリストがスライドし、維持させる方法が知りたいです。

現状、<header-category>をhoverすると<category1>がスライドし、
<category-02>をhoverした際に<category2>はスライドしますが、<category2>にマウスを
移動させた際に<category1>がしまってしまうので同時に<category2>もしまってしまいます。

簡易化して書きますと、リストAはリストBをマウスで触っている間もスライドを維持させたいです。

よろしくお願いします。

Comments

[miyabi_pudding]

タイトルのjQはjQueryのことですよね？
jQueryを略称することは一般的には皆無なので、直しときましょう。

Answer 1

「.category-02」と「.category-2」が構造的に別の場所にあり
HTML上も離れた場所にあるのでhoverで処理することは困難です

Comments

[yambejp]

あえてやるならこんな感じ？

$(function(){
$('.category-1,.category-2').hide();
$('.header-category').hover(function(){
$('.category-1').slideDown();
},function(){
$('.category-1,.category-2').slideUp();
});
$('.category-02').on('mouseover',function(){
$('.category-2').slideDown();
});
});

[yambejp]

でもこれだと孫カテゴリーの切り替えができないですよね

[nekomannma]

ありがとうございました。
htmlの配置位置を変更したら一発でした。