hover()で表示させた要素にカーソルを合わせようとすると、消えてしまいます

Question

実現したいこと

以下のようなHTMLがあるとします。

<ul>
  <li>item</li>
  <li>
  item
<ul class="sub-menu" style="display:none">
  <li>sub-item</li>
</ul>
  </li>
</ul>

二つ目のitemにマウスカーソルを当てると、class"sub-menu"が現れるようにしました。しかしitemからホバーを外して、sub-itemにホバーをしようとすると、sub-menuが消えてしまいます。もちろん、表示するようにしていないからなのですが……どのようなコードを書いたらいいのですか?

以下は現在のコードです

$('.セレクタ').hover(
  function() {
    $('.sub-menu').slideDown();
  },
  function() {
    $('.sub-menu').slideUp();
  }
);

Answer 1

下記でどうでしょうか。

<ul class="menu">
  <li>item</li>
  <li>
    item
    <ul class="sub-menu" style="display:none">
      <li>sub-item</li>
    </ul>
  </li>
</ul>

$('.menu li').hover(
  function() {
    $(this).children('.sub-menu').slideDown();
  },
  function() {
    $(this).children('.sub-menu').slideUp();
  }
);

Comments

[退会済みユーザー]

ありがとうございます。この方法で問題が解決できました。
因みに、この方法で問題が解決できた理由なのですが、
1.jqueryもcssのように(要素　要素)と指定すると子孫まで対象になる
2.menuの子孫である、.sub-menuのliも.hover()の対象になる
という理由から。で合っていますか?

[Yorrie]

①②ともご認識のとおりです！
動かしたい子要素を包括している親を指定してあげればホバーしたままで留めておくことができます。
hatena19さんのコードでは子孫の`li`にも対応するので、開いたアコーディオンの中へ更にアコーディオンを入れても動作できそうですね…

質問者さんの元のコードがわからないんでアレですが、
`li`の中に`div`と`ul`を同階層で入れて、`div`をホバー中に`ul`を開く…としていると同様の現象に遭遇したことがあります。

[hatena19]

TatamiSteakさんからすでに解説がついていますので、補足を少し。
jQueryでは基本的にCSSのセレクタと同じ仕様で要素を指定できます。
$('.menu li') と指定すれば、menuの子孫全部を対象できます。$('.menu > li') とすれば子要素だけになります。質問では子要素だけでしたが、将来、孫要素を追加しても対応できるようにしてみました。

あと、ポイントは $(this).children('.sub-menu') とすることでホバーした要素の子要素を対象にするというところですね。$('.sub-menu') とするとsub-menuが複数あるとすべてのsub-menuが開いてしまいます。
これも質問ではsub-menuが一つだけでしたが、複数になる可能性が高いので汎用性のあるコードにしました。

[退会済みユーザー]

お二人ともありがとうございます。
今現在だけでなく、将来を見越したコーディングが大切なのですね。難しそうです……

Answer 2

記載していただいているコードが$('.セレクタ').hover～となっているので現在どう指定しているかはわかりませんが、
sub-menuも含められている親のliを指定してあげれば動くかと思います。

    $('body > ul > li:last-of-type').hover(
        function() {
            $('.sub-menu').slideDown();
        },
        function() {
            $('.sub-menu').slideUp();
        }
    );