1

私は自分がこれをやっていることに気づきましたが、これが最善の方法かどうかはわかりません。ここに例があります。

<ul id="menubar">
  <li><a class="menu_item">File</a>
    <ul>
      <li><a id="menu_file_new">New</a></li>
      <li><a id="menu_file_open">Open</a></li>
    </ul>
  </li>
  <li><a class="menu_item">Run</a>
    <ul>
      <li><a id="menu_run_preview">Preview</a></li>
      <li><a id="menu_run_compile">Compile</a></li>
    </ul>
  </li>
</ul>

JQuery

$('.menu_item').hover(function(){
    $(this).find('ul').show();
});

これが最善の方法だと思っているだけですが、見つけるのは少しやり過ぎのようですか？

編集：これが原因でcssを使用できません：アイテムがクリック/ホバーするとOpera / IEで失敗し、これら2つのブラウザーで失敗します。http://jsfiddle.net/cJsn2/1/これはhtml標準によるものです。

4

5 に答える 5

2

これはCSSでのみ実行できます

.menu_item ul { display: none; }
.menu_item:hover ul {display: block; }

JavaScriptに関しては、問題ありません。$。findの代わりに$.childrenを使用して、より少ないノードをトラバースできます。

于 2013-01-08T14:55:36.447 に答える
1

使いたいものが一番近いです。DOMツリーを上に移動して、セレクターに一致する最初の親要素を見つけます。

$('.menu_item').hover(function(){
    $(this).closest('ul').show();
});


$(".menu_item").hover(function() {
    $(this).next().show();
});
于 2013-01-08T14:55:34.590 に答える
1

cssだけでこれをやってみてください

キャッチは、「ホバー」を liに適用 し、 aには適用しないことです。 

#menubar li ul{ 
  display:none; 
}

#menubar li:hover > ul{ 
  display:block; 
}

jsfiddle>

于 2013-01-08T15:01:21.867 に答える
1

これは単純なホバースクリプトになります。

// I'm purposely using `toggleClass`, instead of show/hide, to
// have more flexibility with styling
$('.menu_item').each(function () {
  var $li = $(this).closest('li');

  $(this).hover(function () {
    $li.toggleClass('hover');
  });
});

次のCSSを使用します。

ul ul {
  display: none;
}

li.hover > ul {
  display: block;
}

デモ： http： //jsbin.com/ehifod/1/

于 2013-01-08T15:12:08.753 に答える
0

ulCSSを使用できます（これは、要素が要素内に含まれていることを前提としてい.menu_itemます）。

.menu_item:hover > ul {
   display: block;
}

デモ： http： //jsfiddle.net/maniator/cJsn2/

次のHTMLを使用します。

<ul id="menubar">
  <li class="menu_item"><a>File</a>
    <ul>
      <li><a id="menu_file_new">New</a></li>
      <li><a id="menu_file_open">Open</a></li>
    </ul>
  </li>
  <li class="menu_item"><a>Run</a>
    <ul>
      <li><a id="menu_run_preview">Preview</a></li>
      <li><a id="menu_run_compile">Compile</a></li>
    </ul>
  </li>
</ul>
于 2013-01-08T14:55:20.893 に答える