0

初心者が学ぼうとすると、メニューの親にカーソルを合わせると、最初の子だけが表示され、残りの子は表示されないという問題が発生しました。cssを気にしないでください。感謝します。

サンプルコードへのリンクはこちら

ありがとう。

4

6 に答える 6

2

またはこれを使用してください：

 $('#multimenu a').hover(function(){
    $(this).next().show();
 },function(){
    $(this).next().hide(); 
 });

実例： http： //jsfiddle.net/s6EXf/5/

HTMLを次のように変更しました。

<ul id="multimenu">
    <li><a href="#">Example 1</a><div class="submenu"></div></li>         
    <li><a href="#">Example 2</a><div class="submenu"></div></li>    
    <li><a href="#">Example 3</a><div class="submenu"></div></li>
    <li><a href="#">Example 4</a><div class="submenu"></div></li>
    <li><a href="#">Example 5</a><div class="submenu"></div></li>
</ul>

css疑似クラスで実行できるため、最初の子クラスを削除しました:first-child

于 2012-06-22T10:58:03.663 に答える
1

同じIDを持つ複数のコントロールを持つことはできず、代わりに名前を使用できます。だから私は変更しました

ライブデモ

   $('li[name=multimenu]').hover(function() {
      $(this).children('.submenu').show();
     }, function() {
         $(this).children('.submenu').hide();
    });​
于 2012-06-22T10:55:35.233 に答える
1

あなたはすべてのliのIDとしてマルチメニューを使用しています。IDは1ページで使用できます。IDは一意です。

すべてのIDをクラスに変更しました。その動作は以下の例を参照してください。

例： http： //jsfiddle.net/surendraVsingh/s6EXf/6/

于 2012-06-22T10:57:48.450 に答える
0

これを試して

HTML：

<ul>
<li><a href="#">Example 1</a>
    <div class="submenu">
         <div>aaaa<div>
         <div>bbbb<div> 
         <div>cccc<div>     
    </div>
</li>
<li><a href="#">Example 2</a>
    <div class="submenu">
         <div>1111<div>
         <div>2222<div> 
         <div>3333<div>     
    </div>
</li>
<li><a href="#">Example 3</a>
    <div class="submenu">
         <div>xxxx<div>
         <div>yyyy<div> 
         <div>zzzz<div>    
    </div>
</li>
<li><a href="#">Example 4</a>
    <div class="submenu">
         <div>4444<div>
         <div>5555<div> 
         <div>6666<div>    
    </div>
</li>
</ul>

</ p>

CSS：

ul li { 
float:left;
margin-left:1em;    
}
.submenu {
position:absolute; 
display:none;
width:105px;  
height:150px; 
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px; 
background:#ccc; 
z-index:123;
}

Jquery：

$('li').hover(function() {
   $(this).children('.submenu').show();
   }, function() {
   $(this).children('.submenu').hide();
});​

こちらのデモをご覧ください：http：
//jsfiddle.net/naresh3591/4H5BE/4/

于 2012-06-22T12:59:47.273 に答える
0

デモを確認してください。

使用する

$('ul #multimenu').hover(function(){


});

また、すべてのli要素に同じIDを使用しているので、そうしないでください。idは一意であることが意図されています。

于 2012-06-22T10:57:57.157 に答える
0

問題は、IDが一意である必要があり、jsが最初のIDのみを取得することです。id="multimenu"をclass="multimenu"に変更すると、jsコードは次のようになります。

 $('.multimenu').hover(function(){

        $(this).children('.submenu').show();


     },function(){

        $(this).children('.submenu').hide();

     });​
于 2012-06-22T11:01:43.890 に答える