jQuery mouseout（）メニューまたはサブメニューの後に現在のサブメニューを閉じる

Question

私はこれをjSFiddleと一緒に使っています。 私の解決策は動作しますが、mouseout()の後にサブメニューを閉じる何かが必要です。サブメニューを開くとき、またはmouseout（）サブメニュー2を開くとき、サブメニュー2を終了するか、次の項目になります。

このような単純なもの：

if ($.submenu li.item152 == mouseout() || $.submenu2'.eq(0) == mouseout()){ 
$('.submenu2').eq(0).slideUp(600);} 

私はそれをどのように行うことができますか？

ありがとうございます。

Answer 1

その後、トグルサブメニュー用のホバー機能を使用し、あなたのHTML 李がULタグの下でなければなりません修正するために必要なすべてのすべてmouseleave

$('.submenu li.item152').hover(function() { 
 
$('.submenu2').eq(0).slideDown(600); 
 
$('.submenu2').eq(1).slideUp(600); 
 
}); \t 
 

 
$('.submenu li.item153').hover(function() { 
 
$('.submenu2').eq(1).slideDown(600); 
 
$('.submenu2').eq(0).slideUp(600); 
 
}); \t 
 

 
$('.submenu2').mouseleave(function(){ 
 
$('.submenu2').slideUp(600); 
 
});

.submenu2{ 
 
    display: none; 
 
} 
 

 
.submenu li{ 
 
    display: inline-block; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="submenu"> 
 
<li class="item152"> 
 
Item 152 
 
</li> 
 
<li class="item153"> 
 
Item 153 
 
</li> 
 
</div> 
 

 
<div class="submenu2"> 
 
<li>submenu for item 152</li> 
 
<li>submenu for item 152</li> 
 
<li>submenu for item 152</li> 
 
</div> 
 
<div class="submenu2"> 
 
<li>submenu for item 153</li> 
 
<li>submenu for item 153</li> 
 
<li>submenu for item 153</li> 
 
</div>

Answer 2

とまずこの.Hideをお試しください：

$(".menu li").hover(
 
    function() { 
 
    $('.submenu.'+ $(this).attr('class')).slideDown(600); 
 
    }, 
 
    function() { 
 
    $('.submenu.'+ $(this).attr('class')).slideUp(600); 
 
    } 
 
);

.submenu { 
 
    display: none; 
 
} 
 

 
.menu li { 
 
    display: inline-block; 
 
    padding-right: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul class="menu"> 
 
    <li class="item152"> 
 
    Item 152 
 
    </li> 
 
    <li class="item153"> 
 
    Item 153 
 
    </li> 
 
</ul> 
 

 
<ul class="submenu item152"> 
 
    <li>submenu for item 152</li> 
 
    <li>submenu for item 152</li> 
 
    <li>submenu for item 152</li> 
 
</ul> 
 
<ul class="submenu item153"> 
 
    <li>submenu for item 153</li> 
 
    <li>submenu for item 153</li> 
 
    <li>submenu for item 153</li> 
 
</ul>

Answer 3

これを試してみて、純粋なCSSのソリューション：

ul.submenu li{ 
 
    position:relative 
 
} 
 

 
.submenu2{ 
 
    position:absolute; 
 
    top:20px; 
 
    left:0; 
 
    display: none; 
 
    list-style-type: none; 
 
    padding:0px 
 
} 
 

 

 
ul.submenu li:hover ul.submenu2{ 
 
    display: block; 
 
    
 
} 
 

 
ul.submenu2 li:hover{ 
 
    display: block; 
 
    top:10px 
 
} 
 

 
.submenu ul li{ 
 
    
 
    padding-right: 10px; 
 
} 
 

 

 
.submenu li{ 
 
    display: inline-block; 
 
    padding-right: 10px; 
 
}

<ul class="submenu"> 
 
<li class="item152"> 
 
Item 152 
 
<ul class="submenu2"> 
 
<li>submenu for item 152</li> 
 
<li>submenu for item 152</li> 
 
<li>submenu for item 152</li> 
 
</ul> 
 
</li> 
 
<li class="item153"> 
 
Item 153 
 
<ul class="submenu2"> 
 
<li>submenu for item 153</li> 
 
<li>submenu for item 153</li> 
 
<li>submenu for item 153</li> 
 
</ul> 
 
</li> 
 
</ul>