在子菜單中，自舉下拉菜單取消切換

我有一個下拉菜單，使用javascript懸停。在子菜單中，自舉下拉菜單取消切換

$(document).ready(function(){ 
    $('ul.nav li.dropdown').hover(function() { 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500); 
    }, function() { 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500); 
    }); 
});

，我懸停樣式設置

i.dropdown:hover 
{ 
    background-color: rgb(28,181,181); 
}

這裏的問題是，當我徘徊在下拉菜單中沒有切換，切換風格將恢復正常。因爲它仍然註冊我仍然徘徊切換。

<li style="width:20%" class='dropdown'> 
    <a href="" class="dropdown-toggle disabled" id="dropdownMenu2"><div align='center'><b>example</b></div></a> 
    <ul class='dropdown-menu' style='width: 100%;padding:0px;border-width:0px;' aria-labelledby="dropdownMenu2"> 
    <li><a href="" style='height:45px;padding-top: 10px;'><div align='center'><b>example2</b></div></a></li> 
    <li><a href="" style='height:45px;padding-top: 10px;'><div align='center'><b>example3</b></div></a></li> 
    </ul> 
</li>

來源

2017-09-21 SilvarCraw

看[此]（https://jsfiddle.net/DTcHh/37490/）。這是你想要的嗎？ –

嘗試在這個片段中，這是你需要什麼？

$('li.dropdown').hover(function() { 
 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500); 
 
}, function() { 
 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500); 
 
});

li.dropdown 
 
{ 
 
    transition-duration:0.7s; 
 
} 
 
li.dropdown:hover 
 
{ 
 
    background-color: rgb(28,181,181); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<li style="width:20%" class='dropdown'> 
 
    <a href="" class="dropdown-toggle disabled" id="dropdownMenu2"><div align='center'><b>example</b></div></a> 
 
    <ul class='dropdown-menu' style='width: 100%;padding:0px;border-width:0px;' aria-labelledby="dropdownMenu2"> 
 
    <li><a href="" style='height:45px;padding-top: 10px;'><div align='center'><b>example2</b></div></a></li> 
 
    <li><a href="" style='height:45px;padding-top: 10px;'><div align='center'><b>example3</b></div></a></li> 
 
    </ul> 
 
</li>

來源

2017-09-21 04:13:16

不是這個，我想當我懸停菜單不是切換。切換返回原始樣式。但感謝您的回答 – SilvarCraw

請檢查。

$('li.dropdown').hover(function() { 
 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500); 
 
}, function() { 
 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500); 
 
});

li.dropdown:hover{ 
 
    background-color: rgb(28,181,181); 
 
} 
 
.dropdown a{ 
 
    display:block; 
 
    line-height: 100%; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<li style="width:20%" class='dropdown'> 
 
    <a href="" class="dropdown-toggle disabled" id="dropdownMenu2"><div align='center'><b>example</b></div></a> 
 
    <ul class='dropdown-menu' style='width: 100%;padding:0px;border-width:0px;' aria-labelledby="dropdownMenu2"> 
 
    <li><a href="" style='height:45px;padding-top: 10px;'><div align='center'><b>example2</b></div></a></li> 
 
    <li><a href="" style='height:45px;padding-top: 10px;'><div align='center'><b>example3</b></div></a></li> 
 
    </ul> 
 
</li>

來源

2017-09-21 04:08:50

我想當我懸停在菜單上而不是切換。切換樣式返回，因爲樣式仍然註冊我徘徊切換時，我在下拉菜單上徘徊 – SilvarCraw

你想做什麼我不完全明白。 –

你想給下拉菜單中的風格也...？ –

在子菜單中，自舉下拉菜單取消切換

回答

相關問題