避免在菜單之外單擊時忽略Twitter的Bootstrap dropmenu項目

我注意到bootstrap dropmenus中存在一個奇怪的行爲：當用戶單擊dropmenu外的任何地方時，之前點擊過的任何突出顯示的項目都會失去突出顯示。避免在菜單之外單擊時忽略Twitter的Bootstrap dropmenu項目

你可以看到，在下面的鏈接：在名爲「行動」的項目http://twitter.github.io/bootstrap/components.html#dropdowns

點擊後會高亮顯示，然後單擊以外的任何地方都會去掉高亮顯示。

我想這是設計 - 儘管我不明白邏輯：一旦我點擊一個dropmenu中的項目，我希望它只有當點擊另一個項目時才被取消選擇 - 不在菜單之外。

有關如何避免此行爲的任何建議？我試過在任何點擊上使用stopPropogation - 但它不起作用。

謝謝！

來源

2013-06-30 beamish

該樣式適用於：焦點狀態，這就是爲什麼當點擊其他任何地方時忽略突出顯示的原因。嘗試給您的菜單項上類似點擊相同的風格 –

我不知道這種行爲會不會很奇怪。突出顯示由鏈接的焦點設置。點擊其他地方刪除焦點和樣式（突出顯示）。

要改變這種行爲，請添加一個CSS類以便將焦點鏈接到鏈接（對於以前的重點鏈接，請移除此類）。給這個CSS類與高亮類相同的樣式。

例如HTML：

<div class="dropdown clearfix"> 
       <ul style="display: block; position: static; margin-bottom: 5px; *width: 180px;" aria-labelledby="dropdownMenu" role="menu" class="dropdown-menu"> 
       <li><a href="#1" tabindex="-1">Action</a></li> 
       <li><a href="#2" tabindex="-1">Another action</a></li> 
       <li><a href="#3" tabindex="-1">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#4" tabindex="-1">Separated link</a></li> 
       </ul> 
</div>

的CSS的類添加（稱爲聚焦）：

.dropdown-menu > li > a.focused 
{ 
    color: #ffffff; 
    text-decoration: none; 
    background-color: #0081c2; 
    background-image: -moz-linear-gradient(top, #0088cc, #0077b3); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); 
    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); 
    background-image: -o-linear-gradient(top, #0088cc, #0077b3); 
    background-image: linear-gradient(to bottom, #0088cc, #0077b3); 
    background-repeat: repeat-x; 
    outline: 0; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); 
}

的javascript：

$('.dropdown li a').focus(function(){ 
    $('.dropdown li a').removeClass('focused'); 
    $(this).addClass('focused');  

    });

示例/演示：http://bootply.com/66106

來源

2013-06-30 21:16:03

非常感謝你！它工作得很好，我從你的解決方案中學到了我最初應該如何接近它。再次感謝！ – beamish

避免在菜單之外單擊時忽略Twitter的Bootstrap dropmenu項目

回答

相關問題